父子组件数据传递:解决单向数据流
1.父传子组件数据传递
我们可以使用props实现Vue父组件到子组件的数据传递。基础代码如下:
HTML代码如下:
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<template id="thisfather">
<div>
<p>这是父组件的数据,名字:{{name}} 年龄:{{age}}</p>
<son :sname="name" :sage="age"> </son> //父组件数据绑定
</div>
</template>
<template id="thisson">
<div>
<p>这是子组件的数据,名字:{{sname}} 年龄:{{sage}}</p> //绑定的父组件数据传递到子组件模板
</div>
</template>
<div id="app">
<father></father>
</div>
</body>
JS代码如下:
<script>
var app=new Vue({
el:'#app',
data:{
},
components:{
'father':{
template:'#thisfather',
data:function () {
return {
name: 'Tom', //父组件数据
age:30
}
},
components: {
'son':{
template: '#thisson',
data:function () {
return { //子组件无数据
}
},
props:['sname','sage'] //通过props语句与父组件模板的:sname及:sage绑定;该语句位置在子组件模板中
},
}
}
}
})
</script>
运行结果如下:
父组件的数据传递给了子组件
但是上述的数据传递是单向的,即单向数据流,我们不能通过修改子组件的数据来改变父组件的数据。不过有两种方法可以让我们逆向改变数据,即解决单向数据流。
2.解决单向数据流
1.方法一:
代码如下:
<body>
<template id="thisfather">
<div>
<p>这是父组件的数据,名字:{{name}}</p>
<son :sname.sync="name"> </son> //渲染时需要:要更改的props数据.sync
</div>
</template>
<template id="thisson">
<div>
<p>这是子组件的数据,名字:{{sname}}</p>
<button @click="updatedata">更新数据</button>
</div>
</template>
<div id="app">
<father></father>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
},
components:{
'father':{
template:'#thisfather',
data:function () {
return {
name: 'Jack',
}
},
components: {
'son':{
template: '#thisson',
data:function () {
return {
}
},
props:['sname'],
methods:{
updatedata:function () {
this.$emit('update:sname','Tom')//以this.$emit
//("update:你要更改的props数据",改变后的值)这种方法
//修改数据,渲染时需要:要更改的props数据.sync
}
}
}
}
}
}
})
</script>
</body>
关键代码:
<son :sname.sync="name"> </son> //渲染时需要:要更改的props数据.sync
updatedata:function () {
this.$emit('update:sname','Tom')//以this.$emit("update:你要更改的props数据",改变后的值)这种方法修改数据,渲染时需要:要更改的props数据.sync
}
通过以上两句代码来解决单向数据流,这种方法相对方法二较复杂,易出错,故常用方法二。
2.方法二:
代码如下:
<body>
<template id="thisfather">
<div>
<p>这是父组件的数据,名字:{{user.name}}</p>
<son :suser="user"> </son> //传递json对象
</div>
</template>
<template id="thisson">
<div>
<p>这是子组件的数据,名字:{{suser.name}}</p>
<button @click="updatedata">更新数据</button>
</div>
</template>
<div id="app">
<father></father>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
},
components:{
'father':{
template:'#thisfather',
data:function () {
return {
user:{ //将需要改变的数据放到json数组里,然后以json对象的方式进行传递数据,就可以直接进行双向修改
name: 'Jack',
}
}
},
components: {
'son':{
template: '#thisson',
data:function () {
return {
}
},
props:['suser'],
methods:{
updatedata:function () {
this.suser.name='Tom' //直接进行双向修改 这个方法最为常用
}
}
}
}
}
}
})
</script>
</body>
方法二只需将数据以Json数组的形式进行父子组件传递,便可解决单向问题,数据可双向修改。
运行结果如下: