vue-组件传值总结

Vue.js中实现组件间传值的方法有多种。以下是几种常见的传值方式的详细讲解和示例：

1.父组件向子组件传值（props）

• 父组件通过props向子组件传递数据，子组件可以接收并使用这些数据。
• 当父组件重新渲染时，数据会被覆盖。如果子组件内要修改的话推荐使用$emit。
• 声明和传递数据：在父组件模板中，使用v-bind指令（也可简写为:）将需要传递的数据绑定到子组件的prop上。例如，若父组件有一个message数据属性，希望传递给子组件，可以这样写：。这里my-prop是子组件暴露出来的一个prop名称。
• 接收和处理数据：在子组件中，需要声明一个props选项来接收父组件传递过来的数据。对于上面的例子，子组件可以这样定义： props: [‘myProp’] ;或者指定具体的类型:props: {myProp: String}
• 示例：

  <!-- 父组件代码 -->
  <template><div><child :inputName="name"></child></div>
  </template>
  <script>
  import child from './child.vue';
  export default {components: {child},data() {return {name: '来自父组件的数据'};}
  }
  </script><!-- 子组件代码：child.vue -->
  <template><div>{{ inputName }} <!-- 显示：'来自父组件的数据'--></div>
  </template>
  <script>
  export default {props: {inputName: String,required: true}
  }
  </script>
  

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

• 子组件通过$emit触发自定义事件，并在父组件中监听这些事件来接收数据。
• 适用于子组件向父组件传递消息或数据。
• 子组件通过 $ emit 触发一个自定义事件，并传递数据作为参数，而父组件则通过监听这个事件来接收和处理数据。在子组件中，需要先在data中声明要传递的数据，然后通过methods定义一个本地方法来触发 $ emit。这个方法通常绑定在某个事件上，比如点击事件。当事件被触发时，$ emit会执行并发送数据到父组件。
• 示例：

  <!-- 子组件代码：child.vue -->
  <template><button @click="notify">点击我</button>
  </template>
  <script>
  export default {methods: {notify() {this.$emit('dataPassed', '来自子组件的数据');}}
  }
  </script><!-- 父组件代码 -->
  <template><div><child @dataPassed="receiveData"></child></div>
  </template>
  <script>
  import child from './child.vue';
  export default {components: {child},methods: {receiveData(data) {console.log(data); // 输出：来自子组件的数据}}
  }
  </script>
  

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

• 使用一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件，巧妙而轻量地实现了任何组件间的通信。
• 优势：虽然父子组件之间可以通过props和事件进行直接通信，但非父子组件间的通信则要复杂得多。在这种情况下，中央事件总线提供了一种简便、轻量级的方案。它允许不同组件之间通过一个公共的Vue实例进行交互，从而避免了复杂的数据传递链路。
• 示例：

  <!-- 事件总线 -->
  <script>
  export const EventBus = new Vue();
  </script><!-- 组件A -->
  <template><button @click="sendData">发送数据</button>
  </template>
  <script>
  import { EventBus } from './eventBus.js';
  export default {methods: {sendData() {EventBus.$emit('send', '来自组件A的数据');}}
  }
  </script><!-- 组件B -->
  <template><div>接收到的数据：{{ receivedData }}</div>
  </template>
  <script>
  import { EventBus } from './eventBus.js';
  export default {data() {return {receivedData: ''};},created() {EventBus.$on('send', data => {this.receivedData = data;});}
  }
  </script>
  

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

• 使用ref为子组件指定一个引用ID，然后在父组件中通过this.$refs直接访问子组件的公共属性和方法。
• 使用ref为子组件指定引用ID的方法简单明了：在子组件标签中添加ref属性，并为其赋予一个唯一的ID。在父组件中，通过this.$refs.{ID} 的形式来访问该子组件的实例。如果操作的是DOM元素，那么获取到的就是相应的DOM节点。
• 注意：虽然它主要应用于父子组件之间，但其灵活性和简洁性使得在特定情况下非常有效。需要注意的是，过度依赖这种方法可能会导致代码难以维护和测试，因此建议仅在必要时使用。
• 示例：

  <!-- 父组件 -->
  <template><div><button @click="getChildData">获取子组件数据</button><child ref="myChild"></child></div>
  </template>
  <script>
  import child from './child.vue';
  export default {components: {child},methods: {getChildData() {console.log(this.$refs.myChild.childData); // 访问子组件的公共属性}}
  }
  </script><!-- 子组件：child.vue -->
  <template><div>我是子组件</div>
  </template>
  <script>
  export default {data() {return {childData: '这是子组件的内部数据'};}
  }
  </script>