1.通信示意图
2.props(父级向子级传递)
<div id="app">
<my-component icon-text="父传到子的数据"></my-component>
</div>
Vue.component('my-component',{
props:[iconText],
template:'<span>{{ iconText }}</span>'
})
var app=new Vue({
el:"#app"
})
输出结果:<span>父传到子的数据</span>
注意点:
1.props的数组中可盛放很多的传递参数;
2.子组件的属性皆为小写(html的规定),但props里需改为驼峰命名书写;
3.props的传递是单向的,只允许父级传递给子级,反过来不允许(vue1.*还是可以通过 ‘.sync’ 修饰符实现双向数据流的);
4.props中属性使用静态数据传递的值皆为字符串,不可传递数字,布尔,数组,对象;
5.props中属性使用动态数据传递可将所有数据类型进行传递,弥补上一条的不足;
6.以上代码使用的是数组盛放props传递值,不仅如此,可使用对象进行传递,来实现传递值的数据类型,初始值等数据验证;
Vue.component('my-exl',{
props:{
iconText:{
type:Number, //数据类型 或者限定:[Number,String]
default:123, //数据默认值
required:true, //数据是否必传
validatoe:function(val){ //验证失败成功回调函数
return val>10
}
},
......
}
})
3.$emit(子级自定义事件传递值给父级)
//子组件
<template>
<div>
<button @click='clickFn(`石家庄`)'>点击此处将‘石家庄’发射给父组件</button>
<span> 父组件传过的值为:{{sendData}} </span>
</div>
</template>
<script>
export default {
name:'city',
props:['sendData'], // 父组件传给子组件的值
methods:{
clickFn (val) { //子组件按钮点击触发事件函数
let data = { //子组件向上传递的值定义
city: val,
show:true
};
this.$emit('upvalue',data); //clickFn事件触发后,自动触发upvalue事件
}
}
}
</script>
//父组件
<template>
<div>
<city @upvalue="updateCity" :sendData="toCity"></city>
<span v-show="show"> 子组件按钮点击传过的值为:{{toCity}} </span>
</div>
<template>
<script>
import City from "./city"; //父组件导入子组件
export default {
name:'index',
components: {City}, //父组件使用子组件
data () {
return {
toCity:"北京",
show:false
}
},
methods:{
updateCity(data){ //触发子组件的更新城市事件(自动触发的)
this.toCity = data.city; //改变了父组件的值
this.show = data.show;
}
}
}
}
</script>
注意点:
1.使用 $emit 为自定义的事件,如未规定触发函数,则此事件即为无效;
2.使用 $emit 中事件名称必须一一对应,不可出现复用,关键字使用的情况,不然可能会出现意想不到的错误;
3.自定义事件基本流程:
vm.$emit( event, arg ) //点击触发-触发子组件上的事件(event-自定义触发关键字;arg-传递过去的参数)
v-on:event=“eventFn” //自动触发-监听event事件后运行 eventFn(event-自定义触发关键字;eventFn-拿到参数要干嘛)
4.一般在父组件的eventFn中,我们会将传过来的值进行赋值,方便当前实例使用;
4.事件总线(兄弟组件间传值)
//兄弟1组件
Vue.component('b1',{
data(){
return {
b1Val:'b1组件的内容'
}
},
template:'<div><input type="text" v-model="b1Val" @input="passData(b1Val)"></div>',
methods:{
passData(val){
bus.$emit('globalEvent',val) //触发全局事件globalEvent
}
}
})
//兄弟2组件
Vue.component('b2',{
data(){
return {
b2Val:'hello b2Val',
formb1:''
}
},
template:"<div><p>b1传递过来的数据:{{formb1}}</p></div>",
mounted(){
bus.$on('globalEvent',(val)=>{ //绑定全局事件globalEvent
this.formb1=val;
})
}
})
//中央事件总线
var bus=new Vue();
var app=new Vue({
el:'#app'
})
注意点:
1.事件总线的基本是:定义一个全局的vue实例,使他成为一个桥梁来定义事件并触发事件;
2.需要传值的组件中用bus.$emit触发一个自定义事件,并传递参数;
3.需要接收数据的组件中用bus.$on监听自定义事件,并在回调函数中处理传递过来的参数;
5.vuex处理组件间的数据交互
当(1)业务逻辑复杂(2)存在过多的通信传值(3)可能存在共同处理的数据,以上方法就不够看了,因此新的概念出来了,那就是vuex。vuex的做法就是将这一些公共的数据抽离出来,然后其他组件就可以对这个公共数据进行读写操作,这样达到了解耦的目的。下一章我会专门对此进行总结。