Vue3——学会父子组件传值

Vue3——学会父子组件传值

前情回顾

在vue页面的过程中，我们经常重复了一些部分，为了方便使用，降低重复率，我们将这部分内容提取成组件，在之后使用的过程中，只需要将组件引用，在对应的template中使用即可。但是在不同的页面中我们引用组件时，往往组件绑定的是不同的值，这个时候，我们怎么将父中绑定的值给子组件（经常回显时用），那我们在更改组件的值时，如何传递给父绑定的值呢？

父向子组件传值

数据流向是单向的，只能父流向子，所以父组件向子组件传递数据：

• 在子组件中定义props属性，用于接收父组件传递的数据。

const props = defineProps({ modelValue: { type: Number, default: 0 } });

• 在父组件中使用子组件时，通过 v-model绑定需要传递的数据给子组件的props属性。

<CategoryTree v-model="formData.parentId"></CategoryTree>

子向父组件传值

由于数据流向是单向的，子组件想要修改父组件的值，只能通过emit触发器进行修改，所以：

• 在子组件中定义一个emit方法，用于触发事件并传递数据。

//定义触发器
const emit = defineEmits(["update:modelValue"]);
//change点击事件
const change = (value: any) => {
  emit("update:modelValue", value);//在点击事件时，修改父组件的值
};

监听器watch

在我们修改页面回显的时候，由于调用的Ajax请求是异步的，所以我们明明回显了，但是子组件显示的值还是子组件初始的值，所以我们需要使用watch实时监听绑定值的变化，这样子组件就可以正常回显对应的内容了。

//监听器
watch(
  () => props.modelValue,
  (newValue, _oldValue) => {
    parentId.value = newValue;
    //parentId是我子组件中绑定对应修改的值，按不同组件修改对应值即可
  }
);