vue ref如何獲取子組件屬性值
更新時間:2022年03月31日 15:59:46 作者:魔力化
這篇文章主要介紹了vue ref如何獲取子組件屬性值。具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
ref獲取子組件屬性值
父引入、注冊組件并調(diào)用組件
引入、注冊
<script>
? ....
? import CustomerModal from './modules/CustomerModal'
? export default {
? ? name: "CustomerList",
? ? mixins:[JeecgListMixin],
? ? components: {
? ? ? JDate,
? ? ? CustomerModal,
? ? ? JDictSelectTag
? ? },
? ? ...
? }
</script>調(diào)用組件
<customer-modal ref="modalForm" @ok="modalFormOk"></customer-modal> // ref屬性值指定了從$refs中獲取組件的名稱
調(diào)用子組件的函數(shù)
this.$refs.modalForm.add();
調(diào)用子組件的屬性
this.$refs.modalForm.title = "新增";
子組件更改屬性
嚴格來說,Vue子組件不能隨便更改父組件傳遞過來的屬性,但是可以這樣修改
父組件
<component-a :num.sync="number">這是子組件</component-a>
子組件
<template>
<div>
<p @click="change">子屬性{{num}}</p>
</div>
</template>
<script>
export default {
name: "ComponentA",
props: {
num: Number
},
methods: {
change(){
this.$emit('update:num', 10)
}
}
}
</script>以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Vue獲取子組件實例對象ref屬性的方法推薦
- Vue父子組件數(shù)據(jù)雙向綁定(父傳子、子傳父)及ref、$refs、is、:is的使用與區(qū)別
- vue3?setup中父組件通過Ref調(diào)用子組件的方法(實例代碼)
- 詳解Vue3?父組件調(diào)用子組件方法($refs?在setup()、<script?setup>?中使用)
- Vue3中使用setup通過ref獲取子組件的屬性
- vue 父組件通過$refs獲取子組件的值和方法詳解
- Vue通過ref父子組件拿值方法
- vue之父子組件間通信實例講解(props、$ref、$emit)
- vue 使用ref 讓父組件調(diào)用子組件的方法
- vue如何通過ref調(diào)用router-view子組件的方法
相關(guān)文章
vue項目拍照或上傳圖片并實現(xiàn)轉(zhuǎn)化為base64格式
這篇文章主要介紹了vue項目拍照或上傳圖片并實現(xiàn)轉(zhuǎn)化為base64格式方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-11-11
Vue中對象數(shù)組改變其對象內(nèi)容值數(shù)組沒變化的原因與解決方案
最近開發(fā)遇到一個問題,修改對象某一個索引對象時,直接將對象賦值給數(shù)組的某一索引對象,該數(shù)組沒變化,在 Vue 中,直接修改對象數(shù)組中某個對象的屬性值時,數(shù)組的引用本身未改變,本文介紹了詳細的原理分析和解決方案,需要的朋友可以參考下
2025-03-03 
