组件通信-父子通信
1 .父组件通过props传递数据给子组件,子组件通过emit发送事件传递数据给父组件,是一种典型的单项数据流,父组件通过props传递数据,子组件不能直接修改props,而是必须通过发送事件的方式告诉父组件修改数据
https://juejin.im/post/5cde0b43f265da03867e78d3
2 .使用v-model来实现,默认解析称谓value的prop和名为input的事件,这属于典型的双向绑定
可以访问children对象来访问组件实例中的方法和数据
1 .只能两层,再深就无法访问到根组件了
2 .其实这样操作也无妨,因为某些父子组件就是要固定搭配在一起使用的,单独使用也要报错,还不如就这样使用
4 .listener属性访问到父组件中不含native的事件监听器。子组件可以通过访问$listeners来自定义监听器
listeners
1 .attrs"传入内部组件-在创建高级别的组件时非常有用
2 .listeners"传入组件内部,在创建更加高级的组件非常有用
3 .目前没发现他的有用方法,上面的那个方法还是优先级最高的。
兄弟组件通信
1 .可以通过查找父组件中的子组件实现,this.children在子组件中可以通过组件name查询到需要的组件实例
2 .
provide/inject
1 .一个祖先组件向所有子孙后代注入一个依赖,不论组件层次有多深,并在上下游关系成立的时间内始终生效
2 .也就是props跨组件传递,并不能修改传的值,而且,父组件的值发生变化,子组件是不会响应的
3 .改成响应式
provide() {
this.theme = Vue.observable({
color: "blue"
});
return {
theme: this.theme
};
},
methods: {
changeColor(color) {
if (color) {
this.theme.color = color;
} else {
this.theme.color = this.theme.color === "blue" ? "red" : "blue";
}
}
}
跨多层级次的组件通信
1 .provide,inject
2 .不论跨几层都会获得父组件的实例
任意组件之间的通信
1 .vuex
2 .event Bus
on
1 .通过一个空的Vue势力作为中央事件中心,用它来触发事件和监听事件,巧妙地实现了任何组件之间地通信,包括父子,兄弟,跨级。当项目更大的时候可以选择vuex
var Event=new Vue()
Vue.prototype.$ev=Event
//挂载到全局
this.$ev.$on('changeValue',(index,value)=>{
this.value.splice(index,1,value)
})
//定义一个事件,这个事件的名字是changeValue,参数是index,value,操作的数据是这个组件的value
this.$ev.$emit('changeValue',this.depth,e)
//任意一个组件的调用
2 .感觉这个特别像是一种双方约定通信,而且也很清晰,唯一的缺点可能是一个组件的通信,挂载到了全局的Vue属性上面,有点浪费
3 .首先这就意味着我们可以在任何地点把一个组件的数据变成一个只要使用定义数据的方式操作的一个数据仓库,也就是把固定组件的数据像全部组件开放
4 .如果全局定义的时候加载一个数据呢,设置一个data,那么就可以全局访问到,并且可以在任意的地方进行操作。
var Event=new Vue(
{
data:{
name:'libateer'
}
}
)
Vue.prototype.$ev=Event
//改变数据
this.$ev.name="change"
//获取到变化的数据
{{this.$ev.name}}
//完全可以,其实就是使用一个Vue实例来做仓库,这个理解起来似乎是最简单的,比vuex都简单
parent/children 和 ref
1 .ref:如果在普通的DOM元素上使用,引用的就是dom元素,入股哦在子组件上,引用就指向组件实例
2 .chilredn:访问父/子组件
3 .但是无法跨级或在兄弟间通信
4 .
区别
1 .computed
1 .计算属性,依赖其他属性计算值
2 .有缓存,只有当计算值变化才会返回内容
3 .不能传入参数
4 .在html dom加载之后马上执行的,比如一些赋值
5 .擅长处理的场景:一个数据受多个数据影响
2 .watch
1 .擅长处理的场景:一个数据影响多个数据
2 .监听到值发生变化就会执行回调,在回调中进行一些逻辑操作
3 .监听到值的变化需要做一些复杂的业务逻辑的情况使用watch
4 .观察vue实例上的数据变动,对应一个对象,建是观察表达式,值是对应回调
3 .mthods
1 .不处理数据逻辑关系,只提供可调用的函数
2 .定义的函数,需要自己去调用它,必须要一定的触发条件,比如点击事件,需要主动调用
4 .默认加载的时候先computed在watch,不执行methods,等触发某一事件后,则是先methods在watch