组件父子传值
- 单向数据流:父组件的给子组件传参之后子组件不能修改父组件中的数据发生改变会影响到子组件
需求:
- 1.在子组件中修改msg
- 2.子组件中修改之后不会影响到父组件
- 3.父组件中修改之后会影响到子组件
解决方案
- 将msg保存期起来,改变保存的那个属性,这样需求1和需求2就完成了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app" class="f">
<h2>父组件</h2>
<div>msg:{{msg}}</div>
<son :msg="msg"></son>
</div>
</body>
<script src="./vue.js"></script>
<script>
Vue.component('son',{
template:`<div class="s">
<h3>我是子组件</h3>
<div>msg:{{mymsg}}</div>
<input type="text" v-model="mymsg">
</div>
`,
props:['msg'],
data(){
return {
mymsg:this.msg
}
}
})
new Vue({
el:'#app',
data:{
msg:'father'
}
})
</script>
</html>
- 问题:父组件的值改变子组件没改变
- 原因:只是把msg最初的值赋值给了mymsg,而msg时变化的
- 解决:
- msg每次改变之后都会传到子组件,可以通过watch来监听msg的改变 ,每次改变将新的值赋给mymsg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app" class="f">
<h2>父组件</h2>
<div>msg:{{msg}}</div>
<input type="text" v-model="msg">
<son :msg="msg"></son>
</div>
</body>
<script src="./vue.js"></script>
<script>
Vue.component('son',{
template:`<div class="s">
<h3>我是子组件</h3>
<div>msg:{{mymsg}}</div>
<input type="text" v-model="mymsg">
</div>
`,
props:['msg'],
data(){
return {
mymsg:this.msg
}
},
watch: {
msg(){
this.mymsg = this.msg
}
},
})
new Vue({
el:'#app',
data:{
msg:'father'
}
})
</script>
</html>