1.環(huán)境搭建

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

2.父組件向子組件傳值

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

在Child.vue中創(chuàng)建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標(biāo)簽中添加home-child標(biāo)簽，標(biāo)簽中使用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>

結(jié)果

3.子組件向父組件傳值

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

<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標(biāo)簽中監(jiān)聽該自定義事件，并添加一個響應(yīng)該事件的方法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>

結(jié)果：

點擊按鈕后：

轉(zhuǎn)載于:https://www.cnblogs.com/qfstudy/p/9428870.html

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。