1.環境搭建

• 下載 vue-cli：npm install -g vue-cli
• 初始化項目：vue init webpack vue-demo
• 進入vue-demo文件夾：cd vue-demo
• 下載安裝依賴：npm install
• 運行該項目：npm run dev

2.父組件向子組件傳值

• src/components/文件夾下建一個組件，Home.vue
• 創建子組件，在src/components/文件夾下新建一個文件夾，在新建文件夾中新建一個組件Child.vue

在Child.vue中創建props，用于接收父組件傳遞的值

<template><div><div v-for="(item,key) of c" :key="key">{{key}}: {{item}}</div></div> </template><script> export default {name: 'child',props: {c: Array} } </script><style scoped></style>

在Home.vue中注冊Child組件，并在template的div標簽中添加home-child標簽，標簽中使用v-bind指令綁定c。子組件通過props就可以接受到這個父組件傳遞的值。

<template><div class="hello"><home-child v-bind:c="c"></home-child></div> </template><script> import HomeChild from '@/components/common/Child' export default {name: 'home',components: {HomeChild},data () {return {c:[1,2,3]}} } </script><style scoped></style>

結果

3.子組件向父組件傳值

給按鈕綁定點擊事件ChildClick
在事件的函數中使用$emit來觸發一個自定義事件，并傳遞一個參數，這個參數就是子組件要傳遞給父組件的值。

<template><div><div v-for="(item,key) of c" :key="key">{{key}}: {{item}}</div><button v-on:click="ChildClick">點擊向父組件傳值</button><span>{{data}}</span></div> </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>

在父組件中的home-child標簽中監聽該自定義事件，并添加一個響應該事件的方法ShowChild。

<template><div class="hello"><home-child v-bind:c="c" :data="data" v-on:ListenChild="ShowChild"></home-child></div> </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 = dataconsole.log("data:" + data)}} } </script><style scoped></style>

結果：

點擊按鈕后：

轉載于:https://www.cnblogs.com/qfstudy/p/9428870.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的Vue子组件与父组件之间的通信的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。