vue -- 父元件通過$refs獲取子元件的值和方法
前言
在vue專案中元件之間的通訊是很常見的問題,同時也是很重要的問題,我們大致可以將其分為三種情況:
- 父傳子:在父元件中繫結值,在子元件中用props接收
- 子傳父:在父元件中監聽一個事件,在子元件中利用$emit觸發這個事件並帶上資料作為第二個引數,這時父元件中監聽事件的回撥函式就會被呼叫,回撥函式的引數就是子元件帶上來的資料,這樣就可以在父元件中使用子元件的資料了,
- 兄弟之間的傳遞:我們可以使用事件匯流排(eventBus)來輕鬆的解決,其實就是釋出訂閱者模式
今天我們要看的是父元件如何直接調取子元件的資料和方法,而不是通過子元件傳上來的
在這裡我們要理解父元件直接拿事件是在父元件上,子元件傳上來資料,事件是在子元件上,是完全不同的兩種情況
程式碼展示
子元件 children.vue,我們在子元件中定義了資料sonData和方法sonMethod
// children.vue <template> <div>我是 children</div> </template> <script> export default { data: () => ({ sonData: '我是子元件的資料!' }), methods: { sonMethod() { console.log('我是子元件的方法!') } }, computed: { }, created() { } } </script>
父元件 檔案
// 父元件 <template> <div> <children ref='ch'> </children> <h1 @click="onclick">父元件</h1> </div> </template> <script> import children from './coms/children' export default { data() { return {} }, components: { children }, methods: { onclick() { // 或者 let chil = this.$refs['ch'] let chil = this.$refs.ch // 父元件可以通過$refs拿到子元件的物件 // 然後直接呼叫子元件的 methods裡的方法和data裡的資料 console.log(chil) //子元件物件 console.log(chil.sonData) // 我是子元件的資料 console.log(chil.sonMethod()) // 我是子元件的方法 } } } </script>
注意事項
因為 ref 本身是作為渲染結果被建立的,在初始渲染的時候你不能訪問它們 - 它們還不存在!,所以它不是響應式的,不能用在模板或者計算屬性中。
如果您對我的部落格內容有疑惑或質疑的地方,請在下方評論區留言,或郵件給我,共同學習進步。
相關推薦
vue -- 父元件通過$refs獲取子元件的值和方法
前言 在vue專案中元件之間的通訊是很常見的問題,同時也是很重要的問題,我們大致可以將其分為三種情況: 父傳子:在父元件中繫結值,在子元件中用props接收 子傳父:在父元件中監聽一個事件,在子元件中利用$emit觸發這個事件並帶上資料作為第二個引數,這時父
vue2.0中this.$refs獲取子元件屬性報undefined錯誤
首先,要強調一點,我的re被用來給子元件註冊引用資訊,引用資訊註冊在父元件的 $refs 物件上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子元件上,引用就指向元件例項: 當我呼叫下面這個語句想要改變子元件的data中的uid屬性時候 thi
vue父元件主動獲取子元件的資料和方法
父元件主動獲取子元件的資料和方法: 1.呼叫子元件的時候定義一個ref <v-header ref="header"></v-header> 2.在父元件裡面通過 this.$refs.header.屬性 this.$refs.header.方法 <templa
vue中父元件獲取子元件的方法
關鍵詞:ref 在子元件child.vue中,有兩個資料: data() { return { a:1, b:2, } } 在父元件father.vue中,使用子元件: <child ref="child" .../> &
Vue學習(8)————————父子元件傳值,父元件主動獲取子元件數值方法,子元件主動獲取父元件各項,非父子元件傳值
在父元件的引用標籤裡 加入冒號屬性 <template> <div> <!--這裡冒號屬性就是寫入子元件數值--> <v-header :title="title"></v-header> <h1>新聞
vue 父元件主動獲取子元件的資料和方法 子元件主動獲取父元件的資料和方法
Header.vue 1 <template> 2 3 4 <div> 5 6 <h2>我是頭部元件</h2> 7 8 9 <button @click="
Vue 父元件迴圈使用refs呼叫子元件方法出現undefined的問題
Vue 父元件迴圈使用refs呼叫子元件方法出現undefined的問題 1. 背景 最近前端專案遇到一個問題,我在父元件中使用了兩個相同的子元件child,分別設定ref為add和update。其中A元件的功能是新增,也就是說在頁面上A頁面只有一個。而update元件是放在表格裡的,表格中的每一行資料都
vue.js 父元件主動獲取子元件的資料和方法、子元件主動獲取父元件的資料和方法
父元件主動獲取子元件的資料和方法 1.呼叫子元件的時候 定義一個ref <headerchild ref="headerChild"></headerchild> 2.
vue-父元件獲取子元件資料
父元件如何主動獲取子元件上的資料?辦法是通過$refs。 通過$refs我們可以在父元件上獲取子元件上的資料。 子元件: <div ref="dataList"></div>
Vue之父元件給子元件傳值和方法
父元件寫好需要接受的值和方法,使用:title="title"傳title屬性值給子元件, :go="go"傳遞go方法 <template> <div id="root">
vue 高階屬性父元件provide向子元件傳送資料,子元件通過inject接收資料
以前父元件向子元件中傳值是通過props傳值,子元件不能更改父元件中的值,但是可以通過從父元件中獲取的值定義給自己的data值,這裡父元件可以通過provide向子元件傳遞自己元件中的data值,子元件通過inject獲取父元件提供的值程式碼如下: 定義一個子元件: <template> &
優雅的使用vue父元件通過props向子元件傳遞
在Vue 中,可以使用 props 向子元件傳遞資料,下面這篇文章主要給大家介紹了關於vue父元件通過props如何向子元件傳遞方法的相關資料,文中通過示例程式碼介紹的非常詳細,需要的朋友可以參考借鑑,下面來一起看看吧。 vue 元件中的 this vue
Angular父元件獲取子元件裡的資料和方法
(父元件通過區域性變數獲取子元件的引用,主動獲取子元件的方法) 1.在子元件裡cart.component.ts裡定義一個方法: cartRun () { alert("這是購物車子元件裡的方法") } 2.在父元件produc.component.
vue學習(四):子元件向父元件傳參
子元件向父元件傳參主要依靠 v-on 和 $.emit 這個是vue官網上給的方法呼叫,我們看看頁面上怎麼使用。 子元件 main_Header.vue <template> <div> <div>{{count}}</
vue父元件向子元件傳值和方法
1.父元件向子元件傳值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=
vue中props(父組傳遞資料給子元件)的使用
通過props關鍵字可以傳遞字串、數字、布林、陣列、物件、函式 方式一: 在子元件中用 props關鍵字,後面的每個資料表示的是父元件給子元件要傳遞的值,其值的資料型別由父元件定義 props: ['isShowDialog', 'ste
Vue.js 用 $refs 定位 子元件的方法時 出現 undefined
使用 ref 來定位 DOM 節點很方便。但是期間遇到了一個問題,就是在生命週期 mounted 鉤子函式裡面使用 this.$refs.xx,打印出來的卻是 undefined? 如果在 DOM 結構中的某個 DOM 節點使用了 v-if、v-show 或者
vue.js2.0父元件點選觸發子元件方法
<body> <div id="counter-event-example"> <p>{{ total }}</p> <button-counter v-on:ee="incrementT
vue中父元件通過props向子元件傳非同步值為空的解決方案
一、問題描述 封裝了一個highchart元件,想要複用,結果props傳值一直失敗,圖自然畫不出來,watch,mounted等鉤子函式都試過依然不行。 二、解決方案 因為父元件的值是通過axios請求獲得,當父元件拿到處理後的值時,子元件鉤子函式生命週期已經走完,即
vue+element ui 使用$refs獲取el-dialog 下的 el-table 元件 ,以及使用table多選,預設選中
el-dialog程式碼塊:<el-button @click="opendialog">開啟dialog</el-button><el-dialog title="我是標