Vuejs 2.0 子組件訪問/調(diào)用父組件的方法(示例代碼)
更新時間：2018年02月08日 14:33:18 作者：wpj130
這篇文章主要介紹了Vuejs 2.0 子組件訪問/調(diào)用父組件的方法(示例代碼),需要的朋友可以參考下
有時候因為布局問題，需要子組件 把數(shù)據(jù) 傳給父組件，并執(zhí)行父級的某個方法，不多說上代碼：
子組件：
<template>
<div class="isShowing" ref="isShowing">
<div class="menu-wrapper" ref="scroll_warpper" v-show="!hid_show_switch">
<ul ref="scroll_warpper_ul">
<li class="menu-item" @click="goToFatherDetail(233)">
</li>
</ul>
</div>
<v-loading class="isloading" v-show="hid_show_switch"></v-loading>
</div>
</template>
<script type="text/ecmascript-6">
export default {
methods: {
goToFatherDetail (itemId) {
// this.$parent.$router.push('goToDetail');
console.log('子組件方法走了' + itemId);
this.$emit('refreshbizlines', itemId); /* <span style="font-family: Arial, Helvetica, sans-serif;">itemId就是子要傳的數(shù)據(jù) - 這里很重要,refreshbizlines就是父組件$on監(jiān)測的自定義函數(shù)不是父組件的自定義函數(shù)。*/</span>
}
}
};
</script>
父組件：
<template>
<div class="main-wrapper">
<div class="tab-wrapper">
<div class="tab-item">
<router-link to="/isShowing" class="table-item-text">正在熱映</router-link>
</div>
<div class="tab-item">
<router-link to="/willShow" class="table-item-text">即將上映</router-link>
</div>
</div>
</div>
<router-view class="items-show" v-on:refreshbizlines="goToDetail" keep-alive></router-view>
</div>
</template>
<script type="text/ecmascript-6">
export default {
methods: {
goToDetail (itemId) {
console.log('父組件走你：' + itemId);
}
}<strong>
};
</script></strong>
父組件用 v-on 來做個監(jiān)測的函數(shù)來檢測，最終生成的代碼是 類似
on: {
"refreshbizlines": function($event) {
_vm.goToDetail(123)
}
}
所以原理就是 子組件 訪問 父組件的 檢測函數(shù) refreshbizlines ，訪問了，則執(zhí)行 refreshbizline 下面的 函數(shù)
goToDetail -- 也就是父組件的
goToDetail函數(shù)
注意 父組件 的
v-on:refreshbizlines="goToDetail"
一定要放在 你父組件調(diào)用子組件的 模塊名上。
總結(jié)
以上所述是小編給大家介紹的Vuejs 2.0 子組件訪問/調(diào)用父組件的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
基于vue實現(xiàn)多引擎搜索及關(guān)鍵字提示
這篇文章主要為大家詳細介紹了基于vue實現(xiàn)多引擎搜索及關(guān)鍵字提示的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了淺談Vue知識系列-axios，本文章內(nèi)容詳細，具有很好的參考價值，希望對大家有所幫助，需要的朋友可以參考下<BR>2023-01-01
這篇文章給大家詳細介紹了Vue強制組件重新渲染的正確方法,非常的實用,有需要的小伙伴可以參考下2020-02-02
vue3使用particles插件實現(xiàn)粒子背景的方法詳解
這篇文章主要為大家詳細介紹了vue3使用particles插件實現(xiàn)粒子背景的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
解決VUEX的mapState/...mapState等取值問題
這篇文章主要介紹了解決VUEX的mapState/...mapState等取值問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
在前端開發(fā)中,除了通過 API 動態(tài)請求的數(shù)據(jù)外,還有一些諸如 HTML 文件、圖片、字體等文件需要在項目中被用到,通常這些被視為靜態(tài)資源,本文將基于 Vite + React 來講述并解鎖 Vite 引用本地靜態(tài)資源的正確姿勢,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了Vue中的事件綁定與解綁方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
本篇文章主要介紹了淺談Vue數(shù)據(jù)綁定的原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
elementUI vue this.$confirm 和el-dialog 彈出框 移動 示例demo
這篇文章主要介紹了elementUI vue this.$confirm 和el-dialog 彈出框 移動 示例demo，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
a vue component，基于vue的表格組件，主要解決大數(shù)據(jù)量的表格渲染性能問題，使用canvas繪制表格，同時支持類似excel的批量選中，復(fù)制黏貼刪除，實時編輯等功能.這篇文章主要介紹了基于vue+canvas的excel-like組件,需要的朋友可以參考下2017-11-11