【前端之日常工作】vue组件之间使用provide/inject

如果子组件下面调用子组件，可以用provide/inject来传递数据，像element中的form表单便是使用了这个。
provider/inject：简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。

//el-form    组件中 使用  
...
  props: {
    model: { type: Object },
    rules: { type: Object },
    labelWidth: { type: String, default: "" },
    labelSuffix: { type: String, default: "" }
  },
  provide () {
     return { form: this };  //传递给子组件当前的this
  },
...

//el-item-item  组件中 使用
...
   props: {
        label: { type: String, default: '' },
        prop: { type: String }
    },
  inject: ['form'],         //使用this.form.labelWidth
...

//因为移动端中ui框架没有form，就自己使用这种方法封装了

子组件通过插槽传给父组件值，像element中table通过socpe拿到子组件的值

//子组件
...
   <div class="list"
           v-for="(item,index) in data"
           :key="'sort-' + index">
        <div >
          <span>列表-item：</span>
          <slot :row="item"
                :$index="index"></slot>
        </div>
      </div>
...

//父组件
...
    <list-item :data="list">
        <template slot-scope="scope">
            <span class="text"
                  @click="jumpUpdate(scope.row.id)">{{scope.row.$index)}}</span>
        </template>
      </list-item>
...

实现双向数据绑定v-model

//子组件
...
  name: "tinymce",
  model: {
    prop: "value", // prop说:我要在该组件被使用(被父组件调用)时,v-model的值绑定给value1
    event: "change" // event说:我emit(触发)change的时候，参数的值就是父组件v-model收到的值。
  },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  methods:{
  // 监听编辑器内容改变事件
    getVal(val) {
      this.$emit("change", val);
    },
}
...

//父组件
<editor v-model="value"/>