再学习vue知识点

再学习vue组件传值

vue传值方法

1.props/$emit   这个就是父子组件传值  很常见 不多说

2.$emit/$on   注册eventBus  ；

通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。  也很常见  简单描述下

    var Event=new Vue();
    Event.$emit(事件名,数据);
    Event.$on(事件名,data => {});

3.vuex  这个也不多说    基本都得会  

4.$attrs/$listeners  

$attrs 子组件 接收的父级参数集合 ；

$listeners  子组件 接收的父级事件集合 ；

自己接收上一级注册的参数，事件  如果是多级组件，跨级这种，就得层层注册，第三级才可以拿到第一级的参数或者方法；虽然麻烦，好处在于可以知道是那一层级发生的改变；

 

5.provide/inject  

跟4其实很像，但是provide/inject   可以避免层层注册，父级注册等同于data层级的provide，可以在其中写入参数，事件，子级inject，接收一个数组，把需要接收的方法已['****','****'],接收，就可以子级调用

 

父组件可以监听到子组件的生命周期

比如某些情况下我们需要在子组件某个周期执行后在触发 ，当然可以父组件挂载事件，子组件$emit触发，不过有了@hook之后就可以直接运用了

// Parent.vue

<Child @hook:mounted="doSomething" ></Child>

doSomething() {

console.log('父组件监听到 mounted 钩子函数 ...');

},

// Child.vue

mounted(){

console.log('子组件触发 mounted 钩子函数 ...');

},

// 以上输出顺序为：

// 子组件触发 mounted 钩子函数 ...

// 父组件监听到 mounted 钩子函数 ...