快捷導(dǎo)航

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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue-Router路由守衛(wèi)詳?shù)募?xì)用法教程
在Vue.js應(yīng)用中,Vue-Router是一個非常重要的插件,它允許我們實現(xiàn)頁面間的導(dǎo)航,然而,僅僅實現(xiàn)導(dǎo)航是不夠的,我們還需要在導(dǎo)航的不同階段進行各種操作,本文將結(jié)合實際案例,詳細(xì)介紹Vue-Router路由守衛(wèi)的用法,需要的朋友可以參考下
2024-12-12
在Vue中使用Echarts+封裝
這篇文章主要介紹了在Vue中使用Echarts++封裝,需要的朋友可以參考下
2023-11-11
如何在Vue 3中擴展Vue Router鏈接詳解
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁面應(yīng)用,這篇文章主要給大家介紹了關(guān)于如何在Vue 3中擴展Vue Router鏈接的相關(guān)資料,需要的朋友可以參考下
2021-06-06
vue項目拍照或上傳圖片并實現(xiàn)轉(zhuǎn)化為base64格式
這篇文章主要介紹了vue項目拍照或上傳圖片并實現(xiàn)轉(zhuǎn)化為base64格式方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-11-11
分享vue.js devtools遇到一系列問題
這篇文章主要為大家詳細(xì)介紹了vue.js devtools遇到問題的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-10-10
vue.js實現(xiàn)h5機器人聊天（測試版）
這篇文章主要為大家詳細(xì)介紹了vue.js實現(xiàn)h5機器人聊天測試版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-07-07
在Vue3中使用CodeMirror插件的方法詳解
CodeMirror是一個功能強大的Web代碼編輯器,廣泛應(yīng)用于各種Web應(yīng)用中,在Vue3項目中集成CodeMirror,可以顯著提升代碼編輯和展示的用戶體驗,本文將結(jié)合實際案例,詳細(xì)介紹在Vue3中使用CodeMirror插件的方法,需要的朋友可以參考下
2024-12-12
vue3實戰(zhàn)-子組件之間相互傳值問題
這篇文章主要介紹了vue3實戰(zhàn)-子組件之間相互傳值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-03-03
Vue中組件的傳值方式詳解
這篇文章主要介紹了Vue中組件的傳值方式詳解,Vue中最常見的組件之間的通信方式有12種，今天我們會詳細(xì)講解父傳子props方式和子傳父emit以及非父子組件傳值,需要的朋友可以參考下
2023-08-08
Vue中對象數(shù)組改變其對象內(nèi)容值數(shù)組沒變化的原因與解決方案
最近開發(fā)遇到一個問題,修改對象某一個索引對象時,直接將對象賦值給數(shù)組的某一索引對象,該數(shù)組沒變化,在 Vue 中,直接修改對象數(shù)組中某個對象的屬性值時,數(shù)組的引用本身未改變,本文介紹了詳細(xì)的原理分析和解決方案,需要的朋友可以參考下
2025-03-03