一、場(chǎng)景描述：
曾經(jīng)有個(gè)電商項(xiàng)目，其中有個(gè)“老帶新”模塊，而且該模塊新增的入口很多，但是新增后展示效果還不一樣，當(dāng)時(shí)就考慮將新增的組件單獨(dú)拿出來(lái)，其實(shí)就是一個(gè)子組件向父組同步數(shù)據(jù)的過(guò)程。
當(dāng)然，背景不重要了，關(guān)鍵是看實(shí)現(xiàn)的方式。
二、場(chǎng)景展示效果
（PS：展示效果請(qǐng)忽略美感）
三、如何實(shí)現(xiàn)
注意：Vuejs架構(gòu)通過(guò)vue-cli 3.X搭建的項(xiàng)目，版本無(wú)所謂。
1、先看下目錄體系，下圖子組件放在components文件夾內(nèi)，模擬子組件為itemAdd.vue，父組件視圖放在views文件夾內(nèi)，模擬父組件名稱為Home.vue。
2、效果圖里面可以看出有兩個(gè)三個(gè)元素：輸入框、單選框、和新增按鈕。
輸入框使用v-model綁定值，方便后邊獲取到輸入框數(shù)值； 單選框同樣使用v-model綁定值，在新增時(shí)，將picked的值同步至父組件； 新增按鈕，新增時(shí)將表單元素的組件值，操作傳遞事件；
子組件元素代碼：
<template> <div class='add_item'> <label for="username">用戶名： <input id='username' v-model='username' type="text" name='name'> </label> <span>username:{{username}}</span> <br /> <input type="radio" value='男' id='male' v-model='picked'> <label for="male">男</label> <input type="radio" value='女' id='female' v-model='picked'> <label for="female">女</label> <span>picked:{{picked}}</span> <br /> <button @click='add_user'>新增</button> </div></template>子組件數(shù)據(jù)、事件均放在script里面：
<script>export default { name: "itemadd", data() { return { username: "", picked: '男' } }, methods: { add_user() { let user={username:this.username,sex:this.picked} this.$emit('adduser',user) } }}</script>順便貼下子組件的樣式
<style>.add_item { width: 100%; background-color: lightblue; padding-top: 10px; padding-bottom: 10px;}.add_item button { outline: none; border: none; width: 200px; height: 40px; color: white; background-color: green; border-radius: 10px;}</style>3、父組件在使用子組件時(shí)，先獲取到子組件，一并在代碼里面展示組件事件
父組件的script內(nèi)，獲取子組件、初始列表數(shù)據(jù)、以及組件數(shù)據(jù)傳遞方法，代碼有簡(jiǎn)單說(shuō)明
<script>// 獲取組件import itemAdd from '@/components/itemAdd.vue'export default { name: 'home', data() { return { // 設(shè)置初始列表值，為展示效果，特意初始一條數(shù)據(jù) userList: [{ username: "yang", sex: "男" }] } }, methods: { //調(diào)用子組件時(shí)添加數(shù)據(jù)到父組件數(shù)據(jù) newuser(user) { this.userList.push(user) } }, //子組件調(diào)用 components: { itemAdd }}</script>父組件通過(guò)v-on，添加事件方法
<template> <div class="home"> <!-- 子組件調(diào)用，并添加時(shí)間方法 --> <item-add @adduser='newuser'></item-add> <ul> <!-- 簡(jiǎn)單的樣式展示 --> <li> <span>用戶名</span> <span>性別</span> </li> <li v-for='user in userList' :key='user.id'> <span>{{user.username}}</span> <span>{{user.sex}}</span> </li> </ul> </div></template>按照流程，隨便貼下父組件樣式
<style scoped>li { list-style: none;}li:nth-child(even) { background-color: lightgrey;}</style>四、總結(jié)：
子組件通過(guò)事件向父組件同部數(shù)據(jù)，上文展示的是通過(guò)$emit事件。其實(shí)還有v-model、Vuex等方式進(jìn)行傳遞數(shù)據(jù)。
以上所述是小編給大家介紹的Vue.js子組件向父組件通信的方法實(shí)例代碼詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
