组件组合
父子组件的通信
组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信:父组件可能要给子组件下发数据,子组件则可能要将它内部发生的事情告知父组件。
首先,需要在Vue实例里定义一个组件,设置data,然后在这个组件里再添加一个conponents选项,注意不要添错位置。
示例:
<div id="app">
<my-father></my-father>
</div>
//父组件的模板
<template id="fatherTl">
<div>
<p>这是父组件</p>
<p>访问父组件数据:{{name}},{{age}},姓名:{{user.name}},年龄:{{user.age}}</p>
<my-child></my-child>
</div>
</template>
//子组件的模板
<template id="childTl">
<div>
<p>这是子组件</p>
<p>访问子组件数据:性别:{{sex}},身高:{{height}}</p>
</div>
</template>
var vm = new Vue({
el:‘#app‘,
components:{
‘my-father‘:{
template:‘#fatherTl‘,
data:function(){
return {
name:‘Xiao‘,
age:19,
user:{name:‘小幂幂‘,age:31}
}
},
components:{
‘my-child‘:{
template:‘#childTl‘,
data:function(){
return {
height:166,
sex:‘Female‘
}
}
}
}
}
}
});
作为子组件my-child,<my-child></my-child>标签应放在父组件标签<my-father></my-father>标签内,而不能是实例挂载元素下。
如果你尝试直接在父组件模板或子组件模板中通过{{}}模板语法引用则会出现错误。
运行此案例,完美运行,你可以通过vue-devtool查看组件结构图。
目前还没有通信,只是显示了一下各自的数据,接下来传递数据了。
父向子传递数据
父向子传递数据,我们需要做的就是将要传递的数据绑定到子组件的标签上,并在子组件内通过props选项来接收。
//father模板中添加
<my-child :childName="user.name" :age="user.age"></my-child>
//接着,在my-child组件中添加选项
props:[‘childName‘,‘age‘]
//最后,我们引用name和age
//my-child模板中
<div>
<p>这是子组件</p>
<p>访问子组件数据:性别:{{sex}},身高:{{height}}</p>
<p>访问父组件数据:{{childName}},{{age}}</p>//添加了这一条
</div>
接下来访问,即可看到数据显示了。
分析一下,:name和:age,这个冒号“:”后的name和age,就是,props中接收的属性名,将作为子组件的属性名,就是说这两个名可以改,无论改成什么,最后都需要通过这个名字访问。
而属性值就是引号中的user.name,user.age,它直接也是父组件的属性名。
子向父传递数据
子向父传递书序需要通过事件的方式向上传递数据。要做的就是通过$emit方法触发事件,并添加附加参数(就是属性),通过事件传递数据,父组件中的事件方法接收这参数即可。
示例:
//my-child模板中定义一个按钮,作为媒介,用来触发
<button @click="send">向上传递给父组件数据</button>
//组组件定义
methods:{
send(){
this.$emit(‘child-up‘,this.sex,this.height);
}
}
//my-father组件模板中监听这个事件
<my-child :name="user.name" :age="user.age" @child-up="getData"></my-child>
//所以你需要在my-father组件中定义这个getData方法来接收
//但你需注意,你必须提前初始化这些属性
methods:{
getData(sex,height){
this.sex=sex;
this.height=height;
}
}
//myfather模板中
<h3>访问子组件数据,{{sex}},{{height}}</h3>
这样,通过某个媒介(点击或其他方式)作为触发事件的方式,来传递数据,并在该实例处监听该事件,并接收数据。
此处将监听在my-child标签中,因my-chlid标签作为myfather标签的子组件,所以将getData方法定义在父组件methods中。
单向数据流
props 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是反过来不会。这是为了防止子组件无意间修改了父组件的状态,来避免应用的数据流变得难以理解。
另外,每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了,Vue 会在控制台给出警告。
接下来我们想试着修改父组件内属性的值,看看是不是会跟着修改,且如果修改prop中属性是否会出现错误。
示例:
代码较多,我们再新建一个html。我们只注册使用一个组件,因为Vue实例本身也是一个组件,它是根组件,所以在实例中components中注册一个组件作为子组件。
<div id="app">
<p>父组件:{{age}}</p>
<p><input type="text" v-model="name"></p>
<hr/>
<my-component :username="name" :age="age"></my-component>
</div>
<template id="templ">
<p>子组件中父组件的数据,{{username}}</p>
</template>
var vm = new Vue({
el:‘#app‘,
data:{
name:‘XiaoYao‘,
age:19
},
components:{
‘my-component‘:{
template:‘#templ‘,
props:[‘username‘,‘age‘]
}
}
});
我们已经通过props属性进行向下传递数据了,父组件中我们把name属性设置为双向绑定的属性,以便于修改。
接下来直接在文本框中修改name的值,子组件模板中,值就跟着变了。
那么,我们开始尝试着修改它。
示例:
//在组件模板中添加如下按钮。注意模板中只有一个根元素,需要div包起来
<button @click="change">直接修改父组件传递下来的值</button>
//在子组件中定义方法,注意不要写错位置,会发生错误的
methods:{
change(){
this.username=‘I Love You‘;//直接修改它的值
}
}
运行结果,浏览器控制台发生异常了。
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop‘s value. Prop being mutated: "username"
由此可见,它是不可以更改的,因为它是自动更新值的。
如果你很需要在子组件中修改它的话
当然如果非要这么做的话,也还是有方法的,因为你很有必要用它。
- 你可能希望把它当做局部变量处理
- 你可能需要得到它的值显示出来,并修改它
那么你有两种选择,
- 一种是定义局部变量,来操作它。
- 另一种就是定义计算属性,依据原值的修改来动态的改变这个计算属性,而你使用的就是这个计算属性
接下来我们只需要这样:
//1.添加属性,并将传来的属性复制给新的局部定义属性
data:function(){
return {
myName:this.username
}
}
//2.接下来要改变和使用的值就都是myName了
methods:{
change(){
this.myName=‘I Love you‘
}
}
//模板中
<p>子组件中父组件的数据,{{myName}}</p>
对于使用计算属性,我们可以做:
props: [‘size‘],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
//接下来就是使用normalizedSize属性显示了
以上是单项数据流的问题,如果需要双向呢,看下面。
双向数据流,父子双向绑定
我们使用.sync修饰符,该修饰符在1.0中使用,在2.0中废除,后又在2.3中重新引用,只是错了稍加修改,具体情况看官网。
//父组件向下传递时,子组件标签上传递的属性后面添加.sync修饰符
<my-component :username.sync="name" :age="age"></my-component>
然后需要显式的触发一个更新事件。
methods:{
change(){
this.$emit(‘update:username‘, ‘I Love You‘);
//this.username=‘I Love you‘;
}
}
通过$emit事件方法,然后第一个参数,update:是固定写法,后面是新属性值,这样就可以双向绑定了。使用按钮触发不是必需的,只要在某处调用这个触发方法即可。
假如你向下传递的是对象,那么如果要修改的话会更方便。
我们可以直接修改对象的属性值而不需要.sync修饰符。
//为父组件定义一个对象,并且显示他
emp:{salary:6000,workingAge:2,name:‘XiaoChenchen‘}
<p>父组件emp:{{emp}}</p>
//在单击按钮方法中直接设置对象的属性值
this.emp.salary=8000;
单击按钮,发现salarys从6000变成了8000,而且不会不会发生任何错误。
这是因为对象的引用地址没有发生改变,改变的只是里面的属性,属性改变并不会影响对象地址。
所以我们建议封装成对象更方便,但有时也是需要到.sync修饰符的,主要是看情况了。
谢谢观看,下节继续讲组件,非父子间通信,以及slot插槽分发。
爱自己,更爱需要爱的人。。。
原文地址:http://blog.51cto.com/zouzhelu/2106497