前回はコンポーネント通信についてお話しし、親子コンポーネント通信について詳しく説明しました。子コンポーネントに値を渡す親コンポーネント
があるため、親コンポーネントに値を渡す子コンポーネントが必要です。
今号では、コンポーネントコミュニケーションにおける子から親への話をします。
<div id="app">
<App></App>
</div>
<script>
Vue.component('Child',{
template:`
<div>
<h2>我是子组件</h2>
<input type="text" @input="handleInput" />
</div>
`,
methods:{
handleInput(event){
const val = event.target.value;
this.$emit('inputHandler',val);
}
}
})
const App = {
data () {
return {
newVal:''
}
},
template:`
<div>
数据：{
{newVal}}
<Child @inputHandler = 'input' ></Child>
</div>
`,
methods: {
input(newVal){
this.newVal = newVal
}
}
}
new Vue({
el:'#app',
components: {
App
}
});
</script>
慣例により、グローバルコンポーネントのChildとローカルコンポーネントのAppを作成しました。AppコンポーネントでChildコンポーネント
を使用するため、親コンポーネントと子コンポーネントの間には関係があります。
息子から父親に移るプロセス：
- 最初に、親コンポーネントで使用される子コンポーネントでカスタムイベントをバインドします
- 次に、子コンポーネントのネイティブイベントをバインドし、イベント関数で、this。$ emitを介してカスタムイベントをトリガーします。
説明は少し複雑かもしれません、私が投稿したサンプルコードを見てください。
最初にAppコンポーネントを見て、子コンポーネントから渡された値を表示するためにnewValがバインドされたdivを記述し、子コンポーネントを使用しました。この子コンポーネントに対して、カスタムイベント@inputHandler = 'input'を記述しました。、次にこの入力イベントをメソッドで定義し、子コンポーネントからnewValに値を割り当てて、表示します。
見て子コンポーネント。このコンポーネントのみ書き込み入力入力ボックスを、私たちの入力を収集し、そしてバインド** @入力=「handleInput」**私たちはすべてに精通している、と我々はこの中で最も重要であることをイベントhandleInput、最初に通常の操作のように入力したコンテンツ値を取得し、それをthis。$ emitを介して親コンポーネントに渡す必要があります。最初のパラメーターは親コンポーネントでカスタマイズしたイベントの名前です。inputHandler、2番目のパラメーターは渡したい値。
これがプロセス全体です。すでに詳細に説明したと思います。ご不明な点がございましたら、QQに追加してご連絡ください。
WeChatミニプログラムコースのデザイン、完全なデザインのニーズがあります。個人のQQに連絡してください：505417246
次のWeChatパブリックアカウントに注意してください。WeChatアプレット、Vue、TypeScript、フロントエンド、ユニアプリ、フルスタック、Nodejs、Python、その他の実用的な学習資料を受け取ることができます。
最新かつ最も完全なフロントエンドの知識の概要とプロジェクトのソースコードは、できるだけ早くWeChatに公開されます。いいえ、ご注意ください。ありがとうございます。
