九种简洁的Vue数据通讯

props&@

1. props

   • 数组形式

     // 父组件
     <Children v-bind:msg="msg"></Children>
     // 在子组件上定义
     props: ["msg"] //字符串对应的是父组件绑定的v-bind值.
     

   • 对象形式

     // 父组件
     <Children v-bind:msg="msg"></Children>
     // 在子组件上定义 -- 对象可以设置其他条件
     props: {
         msg: {
             type: String, //判断传入的类型
             default: "默认数据", //默认值
             require: true, // 是否必须传入项
         },
     },
     

2. @

   // 在父组件把定义好的fn传下去,供子组件调用.
   <Children @fn="fn"></Children>
      
   //子组件通过$emit调用fn.
   this.$emit("fn", 1, 2, 3);
   

ref

//父组件
<Children ref="subInst" /> 

this.$refs.subInst // 父组件可以通过这个方法直接拿到子组件的data和methods.

provide&inject

//父组件上添加这个方法
provide() {
    return {
		msg: this.msg, // 这里需要注意传基本的值,没有响应式.需要传一个响应式的对象.
    };
},

// 子(孙)组件
inject: ["msg"],

attrs&listeners

• $attrs

  //父组件
  <Children :msg="msg"></Children> 
    
  //子组件
  //传下来的数据保存在$attrs这个属性中
  <template>
    <div class="hello">
      我是attrs子组件 --- {{ $attrs.msg }} //$attrs上的值是只读的，并不会响应式的。强制$set设置vue会抛出警告.这是一个只读属性.
    </div>
  </template> 
  

• $listeners

  //父组件
  <Children :fn="fn"></Children> 
    
  //子组件
  //传下来的方法保存在$listeners这个属性中,可直接调用.
  <template>
    <div class="hello">
      我是attrs子组件 --- {{ $attrs.msg }}
    </div>
  </template> 
  

sync&model

1. sync

   //父组件
   <Children :msg.sync="msg"></Children> // 在父组件注册的子组件挂载修饰符.sync
      
   // 子组件
   this.$emit("update:msg", "789"); //子组件上直接调用这个方法,传值改值.
   

2. model

   //父组件
   <Children v-model="msg"></Children> // 在父组件注册的子组件v-model
      
   //子组件上使用需要props接收value和调用事件event的this.$emit("input", value);
   //这里默认使用input的v-model
   <input type="text" v-model="value" /> //子组件直接修改前提的接收props的value.
   

   在子组件可以通过model修改默认的value和event.例

   model: {
       prop: "check",
       event: "change",
   },
   

eventBus

// 在Vue的原型上绑定
Vue.prototype.$eventBus = new Vue();

//任意组件创建订阅callback这个方法,
this.$eventBus.$on("callback", (data) => {
console.log("接收到data----", data);
});

//任意组件上传入数据通讯,(发布)
this.$eventBus.$emit("callback", "传入数据");

parent&children

• parent

  Vue.prototype.$dispatch = function (eventName, params) {
    var parent = this.$parent;
    while (parent) {
      parent.$emit(eventName, params);
      parent = parent.$parent;
    }
  } //在原型上定义个方法,内部就是一直往上级执行$emit这个方法.
  

  // 在需要使用组件数据的父组件中,订阅.
  this.$on("Up", function (params) {
  	this.msg = params;
  });
    
  // 调用方法的子组件或孙组件.
  this.$dispatch("Up", "我是通过parent方式改变的数据");
  

• children

  // 通知子组件的监听事件
  Vue.prototype.$notice = function (eventName, params) {
    var children = this.$children;
    function deep(children) {
      children.forEach(item => {
        item.$emit(eventName, params);
        if (item.children) {
          deep(children);
        }
      });
    }
    deep(children);
  } //在原型上定义个方法,内部就是递归调用下级的$emit这个方法.
  

  // 在需要使用组件数据的子组件中,订阅.
  this.$on("down", function (params) {
  	this.msg = params;
  });
    
  // 调用方法的组件
  this.$notice("down", "我是通过children方式改变的数据");
  

slot

// 父组件
<children>
  <template v-slot:header="scope">
    <h1>{{scope.header}}</h1> //这里展示的就是123.
  </template>
</children>

//子组件
<slot name="header" :header="123"></slot>

vuex

这里就略过一下api吧.毕竟这个东西用vue的基本使用到这个东西.大家都很熟.

• state

• mutations

  const store = new Vuex.Store({
    state: {
      count: 1
    },
    mutations: {
      increment (state,a) { //后面是传进来的参数.
        // 变更状态
        state.count++
      }
    }
  })
    
  // 触发
  store.commit("increment",2)
  

• actions

  • Action 提交的是 mutation，而不是直接变更状态。

  • Action 可以包含任意异步操作。

  const store = new Vuex.Store({
    state: {
      count: 0
    },
    mutations: {
      increment (state) {
        state.count++
      }
    },
    actions: {
      increment (context) {
        context.commit('increment')
      }
    }
  })
    
  //触发
  store.dispatch("increment"); // 这里需要异步操作返回promise.
  

• getters

  const store = new Vuex.Store({
    state: {
      todos: [
        { id: 1, text: '...', done: true },
        { id: 2, text: '...', done: false }
      ]
    },
    getters: {
      doneTodos: state => {
        return state.todos.filter(todo => todo.done)
      }
    }
  })
    
  //访问
  store.getters.doneTodos
  

• modules(略)

• 辅助函数

  • mapState
  • mapActions
  • mapMutations

• mapGetters

总结