快捷導(dǎo)航

vue.js $refs和$emit 父子組件交互的方法

更新時間：2017年12月20日 10:08:32 作者：axl234

本篇文章主要介紹了vue.js $refs和$emit 父子組件交互的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

本文介紹了vue.js $refs和$emit 父子組件交互的方法，分享給大家，廢話不多說直接看代碼：

<strong>父調(diào)子 $refs （把父組件的數(shù)據(jù)傳給子組件） </strong><br><br><template>
 <div id="app">
  <input type="button" name="" id="" @click="parentCall" value="父調(diào)子" />
  <hello ref="chil" />//hello組件
 </div>
</template>
<script>
 import hello from './components/Hello'
 export default {
  name: 'app',
  'components': {
   hello
  },
  methods: {
　　  parentCall () {
　　　　  this.$refs.chil.chilFn('我是父元素傳過來的')
　　  }
  }
 }
</script>
/*Hello.vue :*/
<template>
 <div class="hello"></div>
</template>
<script>
 export default {
  name: 'hello',
  'methods': {
　　  chilFn (msg) {
　　　　  alert(msg)
　　  }
  }
 }
</script>

<strong>子調(diào)父 $emit (把子組件的數(shù)據(jù)傳給父組件)</strong>
//ps:App.vue 父組件
//Hello.vue 子組件
<!--App.vue :-->
<template>
　　<div id="app">
　　　　<hello @newNodeEvent="parentLisen" />
　　</div>
</template>
<script>
 import hello from './components/Hello'
 export default {
  name: 'app',
  'components': {
   hello
  },
  methods: {
   parentLisen(evtValue) { 
    //evtValue 是子組件傳過來的值
    alert(evtValue)
   }
  }
 }
</script>
<!--Hello.vue :-->
<template>
　　<div class="hello">
　　　　<input type="button" name="" id="" @click="chilCall()" value="子調(diào)父" /> 
　　</div>
</template>
<script>
 export default {
  name: 'hello',
  'methods': {
   chilCall(pars) {
    this.$emit('newNodeEvent', '我是子元素傳過來的')
   }
  }
 }
</script>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue使用prop可以渲染但是打印臺報錯的解決方式
今天小編就為大家分享一篇vue使用prop可以渲染但是打印臺報錯的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
Vue3.5中響應(yīng)式Props解構(gòu)的編譯原理
在Vue3.5版本中,響應(yīng)式Props的解構(gòu)功能正式轉(zhuǎn)正,該功能允許即使在解構(gòu)后也不丟失響應(yīng)性,文通過編譯階段的處理,如何保持解構(gòu)后的props變量仍保持響應(yīng)性,編譯過程中的defineProps宏函數(shù)處理,通過AST和上下文操作實現(xiàn)變量替換,從而讓解構(gòu)后的變量在運行時維持響應(yīng)式狀態(tài)
2024-09-09
Vue3組件傳參的多種方式小結(jié)
這篇文章主要介紹 Vue3組件傳參的方式,包括父子組件、跨層級組件、兄弟組件的傳參,如父子組件通過屬性綁定和自定義事件雙向傳參,跨層級組件可利用 Provide/Inject 機制和 Pinia 狀態(tài)管理,兄弟組件可通過父組件中轉(zhuǎn)或 mitt 庫直接傳參,需要的朋友可以參考下
2025-01-01
Vue2實現(xiàn)子組件修改父組件值的方法小結(jié)
在 Vue 2 中,子組件不能直接修改父組件的值,因為 Vue 遵循單向數(shù)據(jù)流的原則,為了實現(xiàn)子組件修改父組件的數(shù)據(jù),本文給大家介紹了Vue2實現(xiàn)子組件修改父組件值的四種方法,并通過代碼示例講解的非常詳細,需要的朋友可以參考下
2025-03-03
vue3實現(xiàn)ai聊天對話框功能
這篇文章主要介紹了vue3實現(xiàn)ai聊天對話框功能,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧
2024-12-12
解決el-select數(shù)據(jù)量過大的3種方案
最近做完一個小的后臺管理系統(tǒng),快上線了,發(fā)現(xiàn)一個問題,有2個select的選項框線上的數(shù)據(jù)量是1w+,而測試環(huán)境都是幾百的,所以導(dǎo)致頁面直接卡住了,本文給大家總結(jié)了3種方法,需要的朋友可以參考下
2023-09-09
vue實現(xiàn)商品列表的無限加載思路和步驟詳解
這篇文章主要介紹了vue實現(xiàn)商品列表的無限加載思路和步驟詳解,基礎(chǔ)思路是觸底條件滿足之后 page++,拉取下一頁數(shù)據(jù),結(jié)合實例代碼給大家介紹的非常詳細,需要的朋友可以參考下,
2024-06-06
vue3中reactive和ref的實現(xiàn)與區(qū)別詳解
reactive和ref都是vue3實現(xiàn)響應(yīng)式系統(tǒng)的api,他們是如何實現(xiàn)響應(yīng)式的呢,reactive和ref又有什么區(qū)別呢,下面小編就來和大家詳細講講,希望對大家有所幫助
2023-10-10
vue-cli中vue本地實現(xiàn)跨域調(diào)試接口
這篇文章主要介紹了vue-cli中vue本地實現(xiàn)跨域調(diào)試接口,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-01-01
vue3+ts實現(xiàn)一個表單組件的詳細代碼
這篇文章主要介紹了vue3+ts實現(xiàn)一個表單組件的詳細代碼,確保通過axios調(diào)用后端接口來獲取省市區(qū)和街道數(shù)據(jù),并在選擇省市區(qū)時加載相應(yīng)的街道數(shù)據(jù),需要的朋友可以參考下
2024-07-07