vue方法传值到data_Vue之数据传递的方法

1.父组件向子组件传值

父组件

exportdefault{

name:"App",

components:{

blockA

},

data(){return{

x:123}

},

mounted(){

setTimeout(()=>{this.x = 789;

},1000)

}

}

子组件

这是子组件

{ {outData}}

name:"block-a",

props:['outData'],

watch:{

outData(newVal){

console.log("新的值是：" +newVal)

}

}

}

运行效果，界面先展示123，一秒后展示789，控制台仅输出了“新的值：789”。

结论：简单的数值类型能通过props动态反映到子组件内，而且能被子组件watch检测。

2.子组件向父组件传值

子组件

data () {return{//将msg传递给父组件

msg: "我是子组件的msg",

}

},

methods:{

sendMsg(){//func: 是父组件指定的传数据绑定的函数，this.msg:子组件给父组件传递的数据

this.$emit('func',this.msg)

}

}

}

子组件通过this.$emit()的方式将值传递给父组件。注意：这里的func是父组件中绑定的函数名

父组件

data () {return{

msgFormSon:"this is msg"}

},

components:{

child,