Vue3 父子传参 简单易懂

在Vue3中，父子组件间v-model传值的方式和Vue2相比有所改变，可通过在子组件中使用“emit”自定义一个名为“update:modelValue”的事件，然后在父组件中使用v-model来绑定这个事件的参数值即可。如下所示： 子组件代码： ```vue <template> <div> <input type="text" :value="modelValue" @input="handleInput"> </div> </template> <script> export default { props: { modelValue: String }, methods: { handleInput(e) { this.$emit(&#39;update:modelValue&#39;, e.target.value) } } } </script> ``` 父组件代码： ```vue <template> <div> <ChildComponent v-model="name"></ChildComponent> <p>{{ name }}</p> </div> </template> <script> import ChildComponent from &#39;./ChildComponent.vue&#39; export default { components: { ChildComponent }, data() { return { name: &#39;&#39; } } } </script> ``` 父组件中使用v-model绑定的“name”变量会作为子组件emit的参数，实现父子组件间的数据双向绑定。