当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Vue父子组件传值

Vue父子组件传值

2019年06月07日  | 移动技术网IT编程  | 我要评论

 vue父子组件传值：有四种方式：props，ref，emit 和模板传递通信slot

通过props来传值：

静态传值就是直接通过props来传递

动态传值是通过v-bind来绑定一个要传递值的key，然后后面跟要传递的内容，不过这个内容是可以改变的

比如：

<input v-model="parentmsg"> 
<child v-bind:message="parentmsg"></child>

传递的值会跟着input里面输入的值改变而改变

组件可以为 props 指定验证要求。

prop 是一个对象而不是字符串数组时，它包含验证要求

通过ref来传值：

在父组件引用的子组件中采用ref=’要传递的值的key’

父组件中：

<zizujian ref=”msg”></zizujian>
data(){
　　return{
　　　　message:’子组件’
　　}
}
mounted(){
　　this.$ref.msg.getmsg(this.message)
}

子组件中：

<p>{{msg}}</p>
data(){
    return {
        msg:””,
    }
},
mounted(m){
    this.msg=m
}

这样就将父组件中的message中的内容传递到子组件中的msg变量中

emit是子组件向父组件的传值方式

$emit(‘eventname’)    
vm.$emit( eventname’, arg ) //触发当前实例上的事件

子组件可以使用 $emit 触发父组件的自定义事件

父组件：

<zizujian @getmessage=”getmsg”></zizujian>
data(){
    return{
        message:””
    }
},
methods(){
    getmsg(data){
        this.message=data
    }
}

 

子组件：

data(){
　　return{
　　　　message:”hello world”
　　}
},
mounted(){
　　this.$emit(‘getmessage’,this.message)
}

slot：

父组件向子组件传递模板采用slot：

父组件中：

<child>
　　<p>something</p>
</child>

子组件：

<template>
    <slot></slot>
</template>

如果父组件没传递模板，slot里面有内容的话，就会显示内容

如果有多个模板要进行传递，这需要在slot中通过命名（name）来区分：

父组件中：

<child>
　　<p slot=’header’>something</p>
　　<p slot=’footer’>something</p>
</child>

子组件：

<template>
　　<slot name=’header’></slot>
　　<slot name=footer></slot>
</template>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网