Vueでよく使われる知識

子コンポーネントから親コンポーネントへのデータの受け渡し

1.子コンポーネントでは、以下のメソッドで親コンポーネントにデータを渡します。

2、@updateListイベントを書いて、親コンポーネントがイベントをリッスンできるようにします。

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

特性の変化に深く耳を傾けること

アプリケーションのシナリオ

親コンポーネントが子コンポーネントにリスト属性を渡してページをレンダリングすると、リスト内の要素の属性が変化し、子コンポーネントがリストの値に従ってページを再レンダリングするため、ディープリスニングを使用する必要があります。

使用方法

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
}