父子组件传值及v-model实现通信

FlyToHer

一. 父组件向子组件传值

  1. 创建parent和child组件,并在parent中注册child组件
  2. 在父组件调用子组件标签中添加一个自定义属性(msg),
    <template>
        <div class="parent">
            <Child :msg="parentMsg"></Child>
        </div>
    </template>
    <script>
        import Child from './child.vue';
        export default {
            data() {
                return {
                    parentMsg: "我是传给子组件的值"
                };
            },
            components: {
                Child
            },
        }
</script>
  1. 在子组件的props中将parent中自定义的属性(msg)添加进去,然后就可以像data中定义的属性一样使用
    <template>
        <div class="child">
            <p>{{ msg }}</p>
        </div>
    </template>
    <script>
        export default {
            props: {
                msg:{
                    type:String,
                    default:""
                }
            }
        }
    </script>

二. 子组件向父组件传值

  1. 在父组件中的子标签中监听该自定义事件(listenChildEvent)并添加一个响应该事件的处理方法(acceptMsgFromChild)
    <template>
        <div class="parent">
            <Child :msg="parentMsg" @listenChildEvent="acceptMsgFromChild"></Child>
        </div>
    </template>
    <script>
        import Child from './child.vue';
        export default {
            data() {
                return {
                    parentMsg: "我是传给子组件的值"
                };
            },
            components: {
                Child
            },
            methods:{
                acceptMsgFromChild(data){
                    console.log(data);//或者将接受值处理
                }
            }
        }
    </script>
  1. 在子组件中创建一个按钮,给按钮绑定一个点击事件
  2. 在响应该点击事件的函数(sendMsgToParent)中使用$emit来触发父组件的自定义事件(listenChildEvent),并传递一个参数
    <template>
        <div class="child">
            <p>{{ msg }}</p>
            <button @click="sendMsgToParent">向父组件传值</button>
        </div>
    </template>
    <script>
        export default {
            props: {
                msg:{
                    type:String,
                    default:""
                }
            },
            methods:{
                sendMsgToParent(){
                    this.$emit("listenChildEvent","this message is from child");
                }
            }
        }
    </script>

三. 父子组件使用v-model实现组件通信

我们在使用别人的组件库的时候,经常是通过v-model来控制一个组件显示和隐藏的效果,例如:弹框,下面一步一步的解开v-model的什么面纱
提到v-model首先想到的就是我们对于表单用户数据的双向数据绑定,操作起来很简洁很粗暴,例如:

<input type="text" v-model="msg">

data () {            
    return {                
        msg: ''            
    }        
}

其实v-model是个语法糖,上面这一段代码和下面这一段代码是一样的效果:

<input type="text" :value="msg" @input="msg = $event.target.value">
data () {
    return {
        msg: '' 
    }        
}

由此可以看出,v-model="msg"实则是 :value="msg" @input="msg = $event.target.value"的语法糖。这里其实就是监听了表单的input事件,然后修改:value对应的值。除了在输入表单上面可以使用v-model外,在组件上也是可以使用的,这点官网有提到,但是介绍的不是很详细,导致刚接触的小伙伴会有一种云里雾里不知所云的感觉。既然了解了v-model语法糖本质的用法,那么我们就可以这样实现父子组件的双向数据绑定:

以上原理实现方法,写法1:

父组件用法:

<empty v-model="msg"></empty>

子组件写法:

// 点击该按钮触发父子组件的数据同步
<div class="share-btn" @click="confirm">确定</div>

// 接收父组件传递的value值
// 注意,这种实现方法,这里只能使用value属性名
props: {            
    value: {                
        type: Boolean,                
        default: false            
    }        
},
methods: {            
    confirm () {                
        // 双向数据绑定父组件:value对应的值 
        // 通过$emit触发父组件input事件,第二个参数为传递给父组件的值,这里传递了一个false值 
        // 可以理解为最上面展示的@input="msg = $event.target.value"这个事件
        // 即触发父组件的input事件,并将传递的值‘false’赋值给msg             
        this.$emit('input', false)            
    }        
}

这种方式实现了父子组件见v-model双向数据绑定的操作,例如你可以试一下实现一个全局弹窗组件的操作,通过v-model控制弹窗的显示隐藏,因为你要在页面内进行某些操作将他显示出来,控制其隐藏的代码是写在组件里面的,当组件隐藏了对应的也要父组件对应的值改变。

以上这种方式实现的父子组件的v-model通信,虽可行,但限制了我们必须popos接收的属性名为value和emit触发的必须为input,这样就容易有冲突,特别是在表单里面。所以,为了更优雅的使用v-model通信而解决冲突的问题,我们可以通过在子组件中使用model选项,下面演示写法2:
父组件写法:

<empty v-model="msg"></empty>

子组件写法:

<div class="share-btn" @click="confirm">确定</div>

// model选项用来避免冲突
// prop属性用来指定props属性中的哪个值用来接收父组件v-model传递的值
// 例如这里用props中的show来接收父组件传递的v-model值
// event:为了方便理解,可以简单理解为父组件@input的别名,从而避免冲突
// event的值对应了你emit时要提交的事件名,你可以叫aa,也可以叫bb,但是要命名要有意义哦!!!
model: {            
    prop: 'show',            
    event: 'changed'        
},
props: {
    // 由于model选项中的prop属性指定了,所以show接收的是父组件v-model传递的值            
    show: {                
        type: Boolean,                
        default: false            
    }        
},        
methods: {            
    confirm () {                
        // 双向数据绑定父组件传递的值
        // 第一个参数,对应model选项的event的值,你可以叫aa,bbb,ccc,起名随你 
        this.$emit('changed', false)            
    }        
}

这种实现父子组件见v-model绑定值的方法,在我们开发中其实是很常用的,特别是你要封装公共组件的时候。
最后,实现双向数据绑定的方式其实还有.sync,这个属性一开始是有的,后来由于被认为或破坏单向数据流被删除了,但最后证明他还是有存在意义的,所以在2.3版本又加回来了。

例如:父组件:

<empty :oneprop.sync="msg"></empty>

data () {
    return {
        msg: ''
    }
}
<div class="share-btn" @click="changeMsg">改变msg值</div>

props: {            
    oneprop: {                
        type: String,                
        default: 'hello world'
    }        
},        
methods: {            
    changeMsg () {                
        // 双向数据流
        this.$emit('update:msg', 'helow world')           
    }        
}        

这样,便可以在子组件更新父组件的数据。由于v-model只使用一次,所以当需要双向绑定的值有多个的时候,.sync还是有一定的使用场景的。.sync是下面这种写法的语法糖,旨在简化我们的操作:

<empty
    :msg="message"
    @update:msg="message = $event"
></empty>

掌握了组件的v-model写法,在封装一些公共组件的时候就又轻松一些了吧。
这里再提一下:

  • m.$emit(event ,[...args])这个api,其主要作用就是用来触发当前实例上的事件。附加参数都会传给监听器回调。子组件也属于当前实例。第一个参数:要触发的事件名称。后续的参数可选:即作为参数传递给要触发的事件。文档
  • 监听当前实例上的自定义事件,事件可以有$emit触发,也能通过hook监听到钩子函数

vm.$on( event, callback ):一直监听;文档

vm.$once( event, callback ):监听一次;文档

vm.$off( [event, callback] ):移除监听;文档
监听$emit触发的自定义事件,上面已经有过用法了,监听钩子函数,在上面的定时器那块也有演示到。监听钩子函数的场景使用的不多,但是还是要知道的。

  • vm.$attrs:可以获取到父组件传递的除class和style外的所有自定义属性。
  • vm.$listeners:可以获取到父组件传递的所有自定义事件

例如:父组件:

<empty
    :msg="message"
    :title="articleTitle"
    @confirm="func1"
    @cancel="func2"
></empty>

就可以在子组件中获取父组件传递的属性和事件,而不用在props中定义。子组件简单演示如下:

created() {            
    const msg = this.$attrs.msg; // 获取父组件传递的msg
    this.$listeners.confirm && this.$listeners.confirm(); //若组件传递事件confirm则执行
},

这在我们写一些高级组件时候,会有用到的。

阅读 10.9k
8 声望
1 粉丝
0 条评论
8 声望
1 粉丝
文章目录
宣传栏