溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue?ref怎么獲取子組件屬性值

發(fā)布時間:2022-04-01 10:21:48 來源:億速云 閱讀:407 作者:iii 欄目:開發(fā)技術

本篇內容介紹了“vue ref怎么獲取子組件屬性值”的有關知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠學有所成!

ref獲取子組件屬性值

父引入、注冊組件并調用組件

引入、注冊

<script>
  ....
  import CustomerModal from './modules/CustomerModal'
  export default {
    name: "CustomerList",
    mixins:[JeecgListMixin],
    components: {
      JDate,
      CustomerModal,
      JDictSelectTag
    },
    ...
  }
</script>

調用組件

<customer-modal ref="modalForm" @ok="modalFormOk"></customer-modal>
// ref屬性值指定了從$refs中獲取組件的名稱

調用子組件的函數(shù)

this.$refs.modalForm.add();

調用子組件的屬性

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>

“vue ref怎么獲取子組件屬性值”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網站,小編將為大家輸出更多高質量的實用文章!

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI