vue—组件传值的基本内容与sync

 

父组件传值给子组件

这里涉及$emit()  :用于子组件给父组件传值

父组件中注册了子组件，将值传递给子组件：

<blog-post title="My journey with Vue"></blog-post>

子组件利用props接收值

export default{
    data(){
         return {}
    }，
     props: ['title'],
}


//this.$props.title   就能获取到值了哦~

 子组件传值给父组件

子组件：

<button @click="toParents()">给父组件传值</button>


//方法
 toParents:function(){
   this.$emit('parentFun','这是给父组件的值')
 }


//可以简写成
<button @click="$emit('parentFun','hhhh')">给父组件传值</button>

父组件：

<HelloWorld :msg.async="msg" @parentFun='change'/>  //注册组件的时候进行事件绑定

//方法
change:function(data){
    console.log(data)
}

vue2.4+版本后添加了.sync修饰符：可以在子组件中修改值

父组件：

<HelloWorld :msg.sync="msg" @parentFun='change'/>   //使用sync修饰符
//在父组件中监听msg是否发生了变化

　　watch:{
　　　　msg:(newValue,oldValue)=>{
　　　　　　console.log(oldValue);
　　　　　　console.log(newValue)
　　　　}
　　},

子组件中：要修改值需要出发函数  update:msg    : update是固定的,后面跟着的是变量  

changeMsg: function() {
     this.$emit('update:msg','hello')
     console.log(this.$props.msg)
},