最初の2つの問題では、Vueでのローカルコンポーネントとグローバルコンポーネントの作成と使用について簡単に学びました。
コンポーネントが作成された後、非常に重要なリンクは通信です。プロジェクトには多くのコンポーネントが必要であり、データを収集、データを処理し、データを一緒に送信するために相互に通信できる必要があります。この号では、親子コンポーネントの通信について説明します。
親から子に渡すということは、親コンポーネントが値を子コンポーネントに渡すことを意味します。
<div id="app">
<App></App>
</div>
<script>
Vue.component('Child',{
template:`
<div>
<h2>我是子组件</h2>
<p>{
{childData}}</p>
</div>
`,
props: ['childData']
})
const App = {
data () {
return {
msg:'我是父组件传进来的值'
}
},
template:`
<Child :childData = 'msg' ></Child>
`,
methods: {
}
}
new Vue({
el:'#app',
components: {
App
}
});
</script>
まず、ローカルコンポーネントのAppとグローバルコンポーネントのChildをそれぞれ宣言します。
このグローバルコンポーネントをローカルコンポーネントで使用するため、ここに親子コンポーネントの関係があり、息子が使用され、父親が使用されます。
父から子への核心は、値を渡すために小道具を使用することです。
主な手順：
- 親コンポーネントのカスタムプロパティのバインド
- 親コンポーネントにマウントされたプロパティを受け取るために、子コンポーネントで小道具を宣言します
- 子コンポーネントのテンプレートで任意に使用します
私の例のように、AppコンポーネントのテンプレートでグローバルコンポーネントChildを使用し、dataのmsgとして属性childDataでバインドしました。
次に、Appコンポーネントにマウントしたプロパティ名を格納する配列の形式でChildコンポーネントにプロパティpropsを記述しました。この例では、childDataです。次に、この子サブアセンブリで、渡された値を使用するために任意の位置に配置できます。問題ありません。親コンポーネントから渡された値を子コンポーネントで正常に使用し、コンポーネントの親子通信を完了しました。
WeChatミニプログラムコースのデザイン、完全なデザインのニーズがあります。個人のQQに連絡してください：505417246
次のWeChatパブリックアカウントに注意してください。WeChatアプレット、Vue、TypeScript、フロントエンド、ユニアプリ、フルスタック、Nodejs、Python、その他の実用的な学習資料を受け取ることができます。
最新かつ最も完全なフロントエンドの知識の概要とプロジェクトのソースコードは、できるだけ早くWeChatに公開されます。いいえ、ご注意ください。ありがとうございます。
