Vue父組件如何獲取子組件中的變量
在vue項(xiàng)目日常開發(fā)中,難免要把功能性組件抽離出來,這樣結(jié)構(gòu)就會(huì)出現(xiàn)父子組價(jià),兄弟組件等,但是這樣就會(huì)涉及到不同組件需要互相使用其中的值得問題。
之前有說過通過ref來讓父組件操作子組件,并且傳值,那么我們今天來詳細(xì)看看。
案例一:點(diǎn)擊父組件的按鈕,操作子組件顯示
注:可以通過獲取id/class來操作,這里我就不介紹這種方法了,至于jquery的話,在vue中還是慎用。
介紹:這里通過給子組件綁定ref屬性,引號(hào)命名自定義,然后父組件通過 this.$refs.名字 就可以操作子組件的元素,以改變它的樣式等。
<template> <div class="DbSource-box"> <el-button type="primary" icon="" class="addBtn" @click="addDbSource()">新增</el-button> <db-source-add ref="addAlert" v-on:init="init"></db-source-add> </div> </template> <script> import DbSourceAdd from "../components/DbSourceManager/DbSourceAdd"; export default { name: "DbSourceManager", components: {DbSourceAdd}, methods: { // 點(diǎn)擊新增按鈕,彈出新增數(shù)據(jù)源的彈框 addDbSource(){ this.$refs.addAlert.$el.style.display = "block"; }, } } </script>
案列二:獲取子組件data中的變量
介紹:
父組件:
這里通過給子組件綁定ref屬性,引號(hào)中的命名自定義,然后父組件通過 this.$refs.名字.變量名 就可以獲得子組件中的值
<template> <div class="DbSource-box"> <el-button type="primary" icon="" class="selectBtn" @click="deleteSelectDbSource()">批量刪除</el-button> <db-source-table ref="getSelectData" :Data="Data" v-on:init="init"></db-source-table> </div> </template> <script> import DbSourceTable from "../components/DbSourceManager/DbSourceTable"; export default { name: "DbSourceManager", components: {DbSourceTable}, methods: { // 刪除選中的數(shù)據(jù)源(批量刪除) deleteSelectDbSource(){ console.log(this.$refs.getSelectData.multipleSelection) }, } } </script>
子組件:
<template> <div class="table-box"> </div> </template> <script> export default { name: "DbSourceTable", props:["Data"], data(){ return { multipleSelection:[], pagesize: 3, currpage: 1, currId:"" } } </script>
好了,以上就是父組件獲取子組件的值并且操作子組件的方法。
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- vue父組件中獲取子組件中的數(shù)據(jù)(實(shí)例講解)
- vue父組件異步獲取數(shù)據(jù)傳給子組件的方法
- 詳解VUE里子組件如何獲取父組件動(dòng)態(tài)變化的值
- vue 父組件通過$refs獲取子組件的值和方法詳解
- vue.js 子組件無法獲取父組件store值的解決方式
- vue實(shí)現(xiàn)父組件獲取子組件的方法或?qū)傩灾翟斀?/a>
- vue子組件如何獲取父組件的內(nèi)容(props屬性)
- vue中實(shí)現(xiàn)子組件接收父組件方法并獲取返回值
- vue子組件獲取到它父組件數(shù)據(jù)的4種方法
- VUE父組件異步獲取數(shù)據(jù),子組件接收的值為空的問題
- vue父組件異步如何獲取數(shù)據(jù)傳給子組件
- vue3父組件使用ref獲取子組件的屬性和方法
- vue子組件實(shí)時(shí)獲取父組件的數(shù)據(jù)實(shí)現(xiàn)
相關(guān)文章
Vue數(shù)據(jù)代理的原理和實(shí)現(xiàn)
數(shù)據(jù)代理是什么?通過一個(gè)對(duì)象代理,對(duì)另一個(gè)對(duì)象中屬性的操作,簡單就是說:可以通過?對(duì)象b?對(duì)?對(duì)象a?中的屬性進(jìn)行操作,這里我學(xué)到的數(shù)據(jù)代理是用Object.defineProperty這個(gè)方法進(jìn)行操作2022-11-11vue使用docx-preview實(shí)現(xiàn)docx文件在線預(yù)覽功能全過程
文件在線預(yù)覽是目前移動(dòng)化辦公的一種新趨勢,下面這篇文章主要給大家介紹了關(guān)于vue?docx-preview實(shí)現(xiàn)docx文件在線預(yù)覽功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04vuex 項(xiàng)目結(jié)構(gòu)目錄及一些簡單配置介紹
這篇文章主要介紹了vuex 項(xiàng)目結(jié)構(gòu)目錄及一些簡單配置,需要的朋友可以參考下2018-04-04