1.父组件向子组件传值：
实例截图：
实例代码：
/*子组件代码*/ //child.vue
<template>
<div style="border: 1px solid red;margin: 10px;">
<h2>子组件</h2>
<p>{{name}}</p>
</div>
</template>
<script>
export default {
props:{
name:{
//类型 普通类型：字符串（String）、数字（Number）、布尔值（Boolean）、空（Null）引用类型：数组（Array）、对象（Object）
/*其中，普通类型是可以在子组件中更改，不会影响其他兄弟子组件内同样调用的来自父组件的值，但是，引用类型的值，当在子组件中修改后，父组件的也会修改，那么后果就是，其他同样引用了改值的子组件内部的值也会跟着被修改。除非你有特殊的要求这么去做，否则最好不要这么做。*/
type:String,
require:true,
default: "", //默认值
validator: function (value) { //验证器
return value;
}
},
},
data () {
return {
val:this.name
}
},
mounted(){
console.log(this.name);
console.log(this.val);
},
}
</script>
/*父组件代码*/
<template>
<div class="hello">
<h1>父组件</h1>
<input v-model="msg">
<Child :name="msg"></Child>
</div>
</template>
<script>
import Child from "@/components/child"
export default {
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
components:{
Child
},
}
</script>
2.子组件向父组件传值：
实例截图：
实例代码：
/*子组件*/
<template>
<div style="border: 1px solid red;margin: 10px;">
<h2>子组件</h2>
<p>{{val}}</p>
<button @click="sendMsg">向父传值</button>
</div>
</template>
<script>
export default {
data() {
return {
val: "aaaaaa"
}
},
methods:{
sendMsg(){
this.$emit("listen",this.val);
},
},
}
</script>
/*父组件*/
<template>
<div class="hello">
<h1>父组件</h1>
<input v-model="msg">
<child @listen="show"></child>
</div>
</template>
<script>
import child from "@/components/child1"
export default {
components:{
child
},
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods:{
show(val){
this.msg=val;
},
},
}
</script>
在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了（引至：https://www.cnblogs.com/daiwenru/p/6694530.html）