如果子组件下面调用子组件,可以用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"/>