vue父子组件传值总结

父子组件传值

Vue组件之间的传值可以通过 props 和 emit 来实现。

1. 使用 props 传递值（父组件传子组件）

在父组件中通过属性的方式向子组件传递值，在子组件中使用 props 接收该值。

父组件中传值：

<template>
  <child-component :prop1="value1"></child-component>
</template>
<script>
export default {
  data() {
    return {
      value1: 'this is value1',
    };
  },
};
</script>

子组件中接收：

<template>
  <div>{{ prop1 }}</div>
</template>
<script>
export default {
  props: {
    prop1: String, // 声明prop1为字符串类型
  },
};
</script>

1. 使用 emit 传递值（子组件传父组件）

在子组件中通过 $emit 方法触发一个事件，然后在父组件中使用 v-on 监听该事件并获取该事件所传递的值。

子组件中触发事件：

<template>
  <button @click="handleClick">点击触发事件</button>
</template>
<script>
export default {
  methods: {
    handleClick() {
      this.$emit('my-event', 'this is my event value');
    },
  },
};
</script>

父组件中监听事件：

<template>
  <child-component @my-event="handleEvent"></child-component>
</template>
<script>
export default {
  methods: {
    handleEvent(value) {
      console.log(value); // 输出：this is my event value
    },
  },
};
</script>

以下是在父子组件传值时需要注意的事项：

1. 父组件传递给子组件的值必须是响应式的，以便当值发生变化时，子组件也能及时更新视图。

2. 子组件不应该直接修改从父组件传递而来的值，而应该通过 $emit() 方法触发事件，由父组件来修改值。

3. 如果需要在子组件内部定义一个新的变量，可以使用计算属性来实现，并将计算结果传递给子组件的 props。

4. 如果父组件和子组件都需要修改同一个值，应该引入一个共享的状态管理方案，如 Vuex。

5. 当传递对象或数组类型的值时，应该使用深拷贝（如 JSON.parse(JSON.stringify(obj))）来确保传递的是一个新的对象，不会影响原始数据。

总之，在传递和修改数据时，需要考虑数据的响应式和单向数据流的原则，以确保应用程序的可预测性和可维护性。