Vue的$emit传值

2023-4-6    前端达人

$emit,父组件传data给子组件,子组件通过$emit来触发父组件中绑定在子组件身上的事件,达到改变父组件中的data的方法。下面介绍$emit传值的几种方法:

一:$emit传递单值

子组件Test.vue:


  1. <template>
  2. <div>
  3. <div>子组件</div>
  4. <button @click="changeFather">点击我向父组件传递参数</button>
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. methods: {
  10. changeFather() {
  11. this.$emit("changeEvent",'1');
  12. }
  13. }
  14. };
  15. </script>
  16. <style>
  17. </style>

父组件:App.vue


  1. <template>
  2. <div id="app">
  3. <p>这是父组件</p>
  4. <div>{{myString}}</div>
  5. <Test @changeEvent="changeMyString" />
  6. </div>
  7. </template>
  8. <script>
  9. import Test from "./components/Test";
  10. export default {
  11. name: "App",
  12. components: { Test },
  13. data: function() {
  14. return {
  15. myString: ''
  16. };
  17. },
  18. methods: {
  19. changeMyString(val) {
  20. console.log(val);
  21. this.myString=val;
  22. }
  23. }
  24. };
  25. </script>
  26. <style>
  27. #app {
  28. font-family: Avenir, Helvetica, Arial, sans-serif;
  29. -webkit-font-smoothing: antialiased;
  30. -moz-osx-font-smoothing: grayscale;
  31. text-align: center;
  32. color: #2c3e50;
  33. margin-top: 60px;
  34. }
  35. </style>

点击按钮效果如图:

二:$emit传递多个值

子组件Test.vue:


  1. <template>
  2. <div>
  3. <div>子组件</div>
  4. <button @click="changeFather">点击我向父组件传递参数</button>
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. methods: {
  10. changeFather() {
  11. this.$emit("changeEvent",'1','2');
  12. }
  13. }
  14. };
  15. </script>
  16. <style>
  17. </style>

父组件App.vue:


  1. <template>
  2. <div id="app">
  3. <p>这是父组件</p>
  4. <div>{{myString}}</div>
  5. <Test @changeEvent="changeMyString" />
  6. </div>
  7. </template>
  8. <script>
  9. import Test from "./components/Test";
  10. export default {
  11. name: "App",
  12. components: { Test },
  13. data: function() {
  14. return {
  15. myString: ''
  16. };
  17. },
  18. methods: {
  19. changeMyString(val0,val1) {
  20. console.log(val0,val1);
  21. this.myString=val0+val1;
  22. }
  23. }
  24. };
  25. </script>
  26. <style>
  27. #app {
  28. font-family: Avenir, Helvetica, Arial, sans-serif;
  29. -webkit-font-smoothing: antialiased;
  30. -moz-osx-font-smoothing: grayscale;
  31. text-align: center;
  32. color: #2c3e50;
  33. margin-top: 60px;
  34. }
  35. </style>

点击按钮,效果如下:

$emit传递多个值时,还可以采用数组的形式:

修改子组件Test.vue:


  1. <template>
  2. <div>
  3. <div>子组件</div>
  4. <button @click="changeFather">点击我向父组件传递参数</button>
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. methods: {
  10. changeFather() {
  11. this.$emit("changeEvent",['1','2']);
  12. }
  13. }
  14. };
  15. </script>
  16. <style>
  17. </style>

父组件App.vue:


  1. <template>
  2. <div id="app">
  3. <p>这是父组件</p>
  4. <div>{{myString}}</div>
  5. <Test @changeEvent="changeMyString" />
  6. </div>
  7. </template>
  8. <script>
  9. import Test from "./components/Test";
  10. export default {
  11. name: "App",
  12. components: { Test },
  13. data: function() {
  14. return {
  15. myString: ''
  16. };
  17. },
  18. methods: {
  19. changeMyString(val) {
  20. console.log(val);
  21. this.myString=val[0]+val[1];
  22. }
  23. }
  24. };
  25. </script>
  26. <style>
  27. #app {
  28. font-family: Avenir, Helvetica, Arial, sans-serif;
  29. -webkit-font-smoothing: antialiased;
  30. -moz-osx-font-smoothing: grayscale;
  31. text-align: center;
  32. color: #2c3e50;
  33. margin-top: 60px;
  34. }
  35. </style>

点击按钮,效果如下:

三:子组件通过$emit传递给父组件传递值,并且父组件有自定义参数时:

子组件Test.vue:


  1. <template>
  2. <div>
  3. <div>子组件</div>
  4. <button @click="changeFather">点击我向父组件传递参数</button>
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. methods: {
  10. changeFather() {
  11. this.$emit("changeEvent",1,2);
  12. }
  13. }
  14. };
  15. </script>
  16. <style>
  17. </style>

父组件:App.vue


  1. <template>
  2. <div id="app">
  3. <p>这是父组件</p>
  4. <div>{{myString}}</div>
  5. <Test @changeEvent="changeMyString('myParameter',...arguments)" />
  6. </div>
  7. </template>
  8. <script>
  9. import Test from "./components/Test";
  10. export default {
  11. name: "App",
  12. components: { Test },
  13. data: function() {
  14. return {
  15. myString: ''
  16. };
  17. },
  18. methods: {
  19. changeMyString(...args) {
  20. console.log(args);
  21. this.myString=args;
  22. }
  23. }
  24. };
  25. </script>
  26. <style>
  27. #app {
  28. font-family: Avenir, Helvetica, Arial, sans-serif;
  29. -webkit-font-smoothing: antialiased;
  30. -moz-osx-font-smoothing: grayscale;
  31. text-align: center;
  32. color: #2c3e50;
  33. margin-top: 60px;
  34. }
  35. </style>

点击按钮,效果图如下:





蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

分享本文至:

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档