VUE学习笔记（开发中遇到的问题，慢慢补全中。。。）

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，否则会报错。