ホームページ > 記事 > ウェブフロントエンド > Vue 子コンポーネントと親コンポーネント間の通信 (コード付き)
vue-cli をダウンロードします: npm install -g vue-cli
npm install -g vue-cli
初始化项目:vue init webpack vue-demo
进入vue-demo文件夹:cd vue-demo
下载安装依赖:npm install
运行该项目:npm run dev
src/components/文件夹下建一个组件,Home.vue
创建子组件,在src/components/文件夹下新建一个文件夹,在新建文件夹中新建一个组件Child.vue
在Child.vue中创建props,用于接收父组件传递的值
<template> <p> <p v-for="(item,key) of c" :key="key"> {{key}}: {{item}} </p> </p> </template> <script> export default { name: 'child', props: { c: Array } } </script> <style scoped> </style>
在Home.vue中注册Child组件,并在template的p标签中添加home-child标签,标签中使用v-bind
プロジェクトを初期化します: vue init webpack vue-demo code ><br><img src="https://img.php.cn//upload/image/829/436/269/1533541837851476.png" title="1533541837851476.png" alt="Vue 子コンポーネントと親コンポーネント間の通信 (コード付き)">
cd vue-demo
依存関係をダウンロードしてインストールします: npm install
プロジェクトを実行します: npm run dev
2. 親コンポーネントが子コンポーネントに値を渡します
src/components/ フォルダー、Home.vue
新しいフォルダーに Child.vue に親コンポーネントから渡された値を受け取る props を作成<template>
<p class="hello">
<home-child v-bind:c="c"></home-child>
</p>
</template>
<script>
import HomeChild from '@/components/common/Child'
export default {
name: 'home',
components: {
HomeChild
},
data () {
return {
c:[1,2,3]
}
}
}
</script>
<style scoped>
</style>
Home.vue に Child コンポーネントを登録し、テンプレートの p タグに home-child タグを追加します。 code>v-bind 命令は c にバインドされます。子コンポーネントは、props を通じて親コンポーネントによって渡された値を受け取ることができます。
<template> <p> <p v-for="(item,key) of c" :key="key"> {{key}}: {{item}} </p> <button v-on:click="ChildClick">点击向父组件传值</button> <span>{{data}}</span> </p> </template> <script> export default { name: 'child', props: { c: Array, data: String }, methods: { ChildClick: function () { this.$emit("ListenChild","I am child.vue") } } } </script> <style scoped> </style>🎜3. 子コンポーネントは親コンポーネントに値を渡します🎜🎜クリックイベント ChildClick をボタンにバインドします🎜イベント関数で $emit を使用してカスタム イベントをトリガーし、このパラメーターを渡します。 is 子コンポーネントから親コンポーネントに渡される値です。 🎜
<template> <p class="hello"> <home-child v-bind:c="c" :data="data" v-on:ListenChild="ShowChild"></home-child> </p> </template> <script> import HomeChild from '@/components/common/Child' export default { name: 'Home', components: { HomeChild }, data () { return { c:[1,2,3], data: " " } }, methods: { ShowChild: function (data) { this.data = data console.log("data:" + data) } } } </script> <style scoped> </style>🎜親コンポーネントの home-child タグでカスタム イベントをリッスンし、イベントに応答するメソッド ShowChild を追加します。 🎜rrreee🎜結果: 🎜🎜🎜🎜ボタンクリック後: 🎜🎜🎜🎜関連記事: 🎜🎜vueコンポーネントと子コンポーネントと親コンポーネント間の通信を詳しく解説(2) 🎜🎜🎜🎜vue子コンポーネントと子コンポーネントと親コンポーネント間の通信を詳しく解説親コンポーネント🎜🎜
以上がVue 子コンポーネントと親コンポーネント間の通信 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。