vue子は親を伝え、子は親に値を伝え、方法の例
vue子は親を伝え、子は親に値を伝え、方法の例
前回は親伝子propsの使い方を紹介し、この紹介子伝父e m i tの考え方過程を紹介した:サブコンポーネントはイベントを実行することによってemitの考え方過程を利用する:サブコンポーネントはイベントを実行することによってemitの考え方過程を利用する:サブコンポーネントはイベントを実行することによってemitを利用してイベント名と伝達する必要がある値を送信する;親コンポーネントでは、サブコンポーネントのラベルにイベント名をバインドし、イベントを実行してイベントのパラメータを割り当てます.
サブアセンブリ
親コンポーネント
子伝父はこんなに簡単で、純粋な手で打った.ありがとう!
前回は親伝子propsの使い方を紹介し、この紹介子伝父e m i tの考え方過程を紹介した:サブコンポーネントはイベントを実行することによってemitの考え方過程を利用する:サブコンポーネントはイベントを実行することによってemitの考え方過程を利用する:サブコンポーネントはイベントを実行することによってemitを利用してイベント名と伝達する必要がある値を送信する;親コンポーネントでは、サブコンポーネントのラベルにイベント名をバインドし、イベントを実行してイベントのパラメータを割り当てます.
サブアセンブリ
//
<template>
<div class="childDiv">
//
<button @click="sendVal"></button>
</div>
</template>
<script>
export default {
data () {
return {
val: '123123'
}
},
methods: {
// ,change
sendVal () {
// $emit
// ,
this.$emit("sendMethod", this.val)
}
}
}
</script>
親コンポーネント
//
<template>
<div class="fatherDiv">
//
<ChildDiv @sendMethod="getMthodVal" />
</div>
</template>
<script>
//
import ChildDiv from "./components/childDiv"
export default {
data () {
return {
fatherVal: null
}
},
// childDiv
components: {
ChildDiv
},
mounted () {
// getMthodVal
this.getMthodVal()
},
methods: {
//
// val
getMthodVal(val) {
this.fatherVal= val
}
}
}
</script>
子伝父はこんなに簡単で、純粋な手で打った.ありがとう!