vue-组件传值总结

前些天发现了一个巨牛的人工智能学习网站，普通易懂，风趣幽默，不由得分享一下给各人。点击跳转到网站。


   Vue.js中实现组件间传值的方法有多种。以下是几种常见的传值方式的详细教学和示例：
  1.父组件向子组件传值（props）

• 父组件通过props向子组件转达数据，子组件可以吸收并使用这些数据。
  
• 当父组件重新渲染时，数据会被覆盖。如果子组件内要修改的话保举使用$emit。
  
• 声明和转达数据：在父组件模板中，使用v-bind指令（也可简写为:）将须要转达的数据绑定到子组件的prop上。比方，若父组件有一个message数据属性，渴望转达给子组件，可以如许写：。这里my-prop是子组件暴袒露来的一个prop名称。
  
• 吸收和处置惩罚数据：在子组件中，须要声明一个props选项来吸收父组件转达过来的数据。对于上面的例子，子组件可以如许界说： props: [‘myProp’] ;大概指定详细的范例:props: {myProp: String}
  
• 示例：
  1. <!-- 父组件代码 -->
  2. <template>
  3.   <div>
  4.     <child :inputName="name"></child>
  5.   </div>
  6. </template>
  7. <script>
  8. import child from './child.vue';
  9. export default {
  10.   components: {
  11.     child
  12.   },
  13.   data() {
  14.     return {
  15.       name: '来自父组件的数据'
  16.     };
  17.   }
  18. }
  19. </script>
  21. <!-- 子组件代码：child.vue -->
  22. <template>
  23.   <div>
  24.     {{ inputName }} <!-- 显示：'来自父组件的数据'-->
  25.   </div>
  26. </template>
  27. <script>
  28. export default {
  29.   props: {
  30.     inputName: String,
  31.     required: true
  32.   }
  33. }
  34. </script>

  复制代码

2.子组件向父组件传值（$emit）

• 子组件通过$emit触发自界说变乱，并在父组件中监听这些变乱来吸收数据。
  
• 实用于子组件向父组件转达消息或数据。
  
• 子组件通过 $ emit 触发一个自界说变乱，并转达数据作为参数，而父组件则通过监听这个变乱来吸收和处置惩罚数据。在子组件中，须要先在data中声明要转达的数据，然后通过methods界说一个当地方法来触发 $ emit。这个方法通常绑定在某个变乱上，好比点击变乱。当变乱被触发时，$ emit会实验并发送数据到父组件。
  
• 示例：
  1. <!-- 子组件代码：child.vue -->
  2. <template>
  3.   <button @click="notify">点击我</button>
  4. </template>
  5. <script>
  6. export default {
  7.   methods: {
  8.     notify() {
  9.       this.$emit('dataPassed', '来自子组件的数据');
  10.     }
  11.   }
  12. }
  13. </script>
  15. <!-- 父组件代码 -->
  16. <template>
  17.   <div>
  18.     <child @dataPassed="receiveData"></child>
  19.   </div>
  20. </template>
  21. <script>
  22. import child from './child.vue';
  23. export default {
  24.   components: {
  25.     child
  26.   },
  27.   methods: {
  28.     receiveData(data) {
  29.       console.log(data); // 输出：来自子组件的数据
  30.     }
  31.   }
  32. }
  33. </script>

  复制代码

3.非父子组件间的传值（变乱总线）

• 使用一个空的Vue实例作为中央变乱总线（变乱中央），用它来触发变乱和监听变乱，奇妙而轻量地实现了任何组件间的通讯。
  
• 上风：固然父子组件之间可以通过props和变乱举行直接通讯，但非父子组件间的通讯则要复杂得多。在这种环境下，中央变乱总线提供了一种轻巧、轻量级的方案。它允许差异组件之间通过一个公共的Vue实例举行交互，从而制止了复杂的数据转达链路。
  
• 示例：
  1. <!-- 事件总线 -->
  2. <script>
  3. export const EventBus = new Vue();
  4. </script>
  6. <!-- 组件A -->
  7. <template>
  8.   <button @click="sendData">发送数据</button>
  9. </template>
  10. <script>
  11. import { EventBus } from './eventBus.js';
  12. export default {
  13.   methods: {
  14.     sendData() {
  15.       EventBus.$emit('send', '来自组件A的数据');
  16.     }
  17.   }
  18. }
  19. </script>
  21. <!-- 组件B -->
  22. <template>
  23.   <div>接收到的数据：{{ receivedData }}</div>
  24. </template>
  25. <script>
  26. import { EventBus } from './eventBus.js';
  27. export default {
  28.   data() {
  29.     return {
  30.       receivedData: ''
  31.     };
  32.   },
  33.   created() {
  34.     EventBus.$on('send', data => {
  35.       this.receivedData = data;
  36.     });
  37.   }
  38. }
  39. </script>

  复制代码

4.直接访问子组件（ref）

• 使用ref为子组件指定一个引用ID，然后在父组件中通过this.$refs直接访问子组件的公共属性和方法。
  
• 使用ref为子组件指定引用ID的方法简朴明确：在子组件标签中添加ref属性，并为其赋予一个唯一的ID。在父组件中，通过this.$refs.{ID} 的情势来访问该子组件的实例。如果使用的是DOM元素，那么获取到的就是相应的DOM节点。
  
• 留意：固然它重要应用于父子组件之间，但其机动性和简便性使得在特定环境下非常有效。须要留意的是，过分依赖这种方法大概会导致代码难以维护和测试，因此发起仅在须要时使用。
  
• 示例：
  1. <!-- 父组件 -->
  2. <template>
  3.   <div>
  4.     <button @click="getChildData">获取子组件数据</button>
  5.     <child ref="myChild"></child>
  6.   </div>
  7. </template>
  8. <script>
  9. import child from './child.vue';
  10. export default {
  11.   components: {
  12.     child
  13.   },
  14.   methods: {
  15.     getChildData() {
  16.       console.log(this.$refs.myChild.childData); // 访问子组件的公共属性
  17.     }
  18.   }
  19. }
  20. </script>
  22. <!-- 子组件：child.vue -->
  23. <template>
  24.   <div>我是子组件</div>
  25. </template>
  26. <script>
  27. export default {
  28.   data() {
  29.     return {
  30.       childData: '这是子组件的内部数据'
  31.     };
  32.   }
  33. }
  34. </script>

  复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金