Vue3中父子组件数据通信之v-model的绑定使用
作者：温新
时间：2021-08-08
hi，我是温新，一名PHPer
Vue3父子组件通信时可以使用v-model双向绑定进行简化操作。
举个例子：父组件通过prop将数据传递给子组件，子组件通过emit将事件传递给父组件，用以实现父子组件之间的通信。
常用的父子组件通信使用
该案例中，在子组件中点击需要，需要修改父组件中的数据。
1）子组件向组件说，我要修改($emit)你数据的
count数据；2）父组件对子组件说：我已经收到的请求，然后再其内部修改自己的count值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
// 父组件对子组件发出的自定义事件进行监听
<child-component :count="count" @incr="parentIncr"></child-component>
</div>
<script>
const app = Vue.createApp({
data() {
return {
count:0
}
},
methods:{
parentIncr(){
this.count++;
}
}
});
app.component('childComponent',{
props:['count'],
template:`<div @click="incr"><p>我是子组件</p><p>{{count}}</p></div>`,
methods:{
incr(){
// 向父组件发出事件
this.$emit('incr')
}
}
});
app.mount('#app');
</script>
</body>
</html>
使用v-model双向绑定
<div id="app">
<!-- 双向绑定父组件中的count数据 -->
<!-- 并将其传递给子组件 -->
<child-component v-model="count"></child-component>
</div>
<script>
const app = Vue.createApp({
data() {
return {
count:0
}
}
});
app.component('childComponent',{
// 接收父级件传递的值
// 必须使用 modelValue 来接收
props:['modelValue'],
template:`<div @click="incr"><p>我是子组件</p><p>{{modelValue}}</p></div>`,
methods:{
incr(){
/**
* 1）子组件中发出事件，并使用第二个参数直接修改
* 父组件中的数据。
* 2）发出的方法必须是 update:modelValue
**/
this.$emit('update:modelValue',this.modelValue+1)
}
}
});
app.mount('#app');
</script>
这就是Vue3中所约定的使用方法，那么也可以使用自定义的名称：
使用方法：v-model:自定义名称，
案例：
<div id="app">
<!--使用自定义名称-->
<child-component v-model:ziruchu="count"></child-component>
</div>
<script>
const app = Vue.createApp({
data() {
return {
count:0
}
}
});
app.component('childComponent',{
props:['ziruchu'],
template:`<div @click="incr"><p>我是子组件</p><p>{{ziruchu}}</p></div>`,
methods:{
incr(){
this.$emit('update:ziruchu',this.ziruchu+1)
}
}
});
app.mount('#app');
</script>
我是温新
第天进步一点，就一点点
请登录后再评论