VUE学习笔记
1.子组件调用父组件的方法
1.父组件中的子组件写法
<product-add
ref="productAdd"
:productId="productId"
v-if="productAddVisible"
:visible.sync="productAddVisible"
@getList="getPage"
></product-add>
2.子组件中调用的方法
this.$emit('getList');
3.父组件的方法
getPage() {
getCategoryList({}).then(response => {
this.productList = response.data.data;
});
},
父组件传值给子组件
1.直接传值
this.$nextTick(() => {//等待子组件加载完再赋值
this.$refs.productAdd.getProductById(id);
});
其中 productAdd 为子组件的名字,getProductById(id)为子组件的方法,即为父组件直接调用子组件的方法,然后传id给子组件,也可以传对象。
components: {
productAdd
},
2.通过绑定传值
直接在父组件的data里面添加数据,然后引入子组件的时候如下
<product-add
ref="productAdd"
:productId="productId"
></product-add>
子组件钟:
props: ["productId"]
此方法不需要在子组件的data里面再定productId,否则会报错。