<!--样式部分-->
<style>
.container{
background: #ccc;
color:greenyellow;
}
</style>
调整后的child.vue
<!--模板部分-->
<template>
<div class="sub-container">
<h3>我是儿子</h3>
<div>我从父亲那边接收过来的信息：</div>
<div>{{sendMessage}}</div>
<div>是否可以子影响父呢？</div>
<input type="text" v-model="sendMessage">
</div>
</template>
<!--js部分-->
<script>
//子组件
export default {
name:'child',//必须设定name，否则无法在父组件import
props:['sendMessage'],
data(){
return {
};
}
}
</script>
<!--样式部分-->
<style>
.sub-container{
background: blue;
color:red;
}
</style>
运行一下npm run dev，看一下结果：
可以看出，子组件是无法影响父组件的，这样父组件就成功解耦了。
大家要注意一个问题——传递的数据类型问题。
传递的是值类型肯定没问题，假如是对象或者数组这样的引用类型，变量共用同一内存，所以父子会出现双向影响，这个问题一定要注意。
为了杜绝隐患，提高安全性，我们在子组件将prop接收的类型做一下强制检测，假如传入的数据类型并不是我需要的，可以抛出异常。
Helloworld.vue
<!--模板部分-->
<template>
<div class="container">
<h1>我是父亲</h1>
<input type="text" v-model="myMsg">
<!--<input type="text" v-model="myNum">-->
<ul v-for="item of myObj">
<li>{{item.name}}</li>
</ul>
<br>
<!--绑定父组件的某个变量myMsg-->
<div>
<!--注意子组件接受变量时，需要变为驼峰命令法sendMessage-->
<child :send-message="myMsg" :send-num="myNum" :send-obj="myObj"></child>
</div>
</div>
</template>
<!--js部分-->
<script>
//引入子组件,需要设定子组件的name为child
import child from './children/child.vue'
export default {
name:'helloworld',
data(){
return {
myMsg:'hello,my son!',
myNum:'123',
myObj:[{id:1,name:'Tom_Lo'},{id:2,name:'tom'}]
};
},
components:{child}//局部注册子组件
}
</script>
<!--样式部分-->
<style>
.container{
background: #ccc;
color:green;
}
</style>
父组件这次传了三个不同类型的信息，分别是字符串、数字和json对象。其中，数字类型我故意写错了，看一下子组件是否会检测出来。
child.vue
<!--模板部分-->
<template>
<div class="sub-container">
<h3>我是儿子</h3>
<div>我从父亲那边接收过来的信息：</div>
<div>字符串：{{sendMessage}}</div>
<div>数字：{{sendNum}}</div>
<div>
<ul v-for="item of list">
<li>{{item.name}}</li>
</ul>
</div>
</div>
</template>
<!--js部分-->
<script>
//子组件
export default {
name:'child',//必须设定name，否则无法在父组件import
props:{
sendMessage:{
type:String,//传入类型必须是字符串
required:true//必传
},
sendNum:{
type:Number,//传入类型必须是数字
required:true
},
//如果是数组或对象
sendObj:{
validator:function(val){
if(Object.prototype.toString.call(val) === '[object Array]' || Object.prototype.toString.call(val) === '[object Object]'){
return true;
}
}
}
},//声明验证类型
data(){
var parentObj = this.sendObj;//获取父组件传来的json
var childObj =JSON.parse(JSON.stringify(parentObj));//复制一份，避免污染父组件的数据
childObj.push({id:3,name:'mike'});//追加一个对象
return {
list:childObj
};
}