Vue中常用知识点

子组件向父组件传递数据

1、子组件中，通过下面的方法向父组件传递数据。

2、父组件中通过写@updateList事件来获得监听事件

<visual-reserve-component v-if="isWeb"
                              :style="{height:seatheight+'px'}"
                              class="scroll-seat"
                              :list="list"
                              @updateList="updateList" />

深度监听属性的变化

应用场景：

父组件向子组件传递参数list属性来渲染页面，list的中元素的属性发生变化，此时要想让子组件根据list的值重新渲染，这个时候就要使用深度监听。

如何使用：

1、在父组件中，调用子组件。

2、在子组件中，首先定义属性

props: {
    list: {
      type: Array,
      default: () => {

      }
    }
  },

然后深度监听属性的变化

watch: {
    list: {
      handler (newV) {
        this.webLog('list数据改变了')
        this.draw()
      },
      deep: true
    }
  },

调用组件中的方法

1、首先定义一个组件为如下

props：{
         shareList：{

               type: Array,
               // 注意此处的形式
               default: () => []

         }

}

//对象的形式
export const cardData = {
  key: 1
}
//值的形式
export const key = '123'
// 暴露出去
export default {
    key,
    cardData
}