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 = "新增";
子組件更改屬性
嚴(yán)格來說,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)iframe嵌套Html頁面及注意事項說明
這篇文章主要介紹了在vue中實現(xiàn)iframe嵌套Html頁面及注意事項說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10vue+element的表格實現(xiàn)批量刪除功能示例代碼
這篇文章主要介紹了vue+element的表格實現(xiàn)批量刪除功能示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08vue2.0與vue3.0及vue與react的區(qū)別及說明
這篇文章主要介紹了vue2.0與vue3.0及vue與react的區(qū)別及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10Vue3嵌套路由中使用keep-alive緩存多層的實現(xiàn)
本文介紹了Vue3 嵌套路由中使用?keep-alive緩存多層的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04