<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>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue常用高階函數(shù)及綜合實(shí)例
這篇文章主要介紹了vue常用高階函數(shù)及綜合案例，文章內(nèi)容講解的很清晰，有對于這方面感興趣的同學(xué)可以研究下
2021-02-02
vue+element表格導(dǎo)出為Excel文件
這篇文章主要為大家詳細(xì)介紹了vue+element表格導(dǎo)出為Excel文件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-09-09
一步步帶你用vite簡單搭建ts+vue3全家桶
Vue3與TS的聯(lián)合是大趨勢,下面這篇文章主要給大家介紹了關(guān)于用vite簡單搭建ts+vue3全家桶的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
在vue中實(shí)現(xiàn)iframe嵌套Html頁面及注意事項(xiàng)說明
這篇文章主要介紹了在vue中實(shí)現(xiàn)iframe嵌套Html頁面及注意事項(xiàng)說明,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue+element的表格實(shí)現(xiàn)批量刪除功能示例代碼
這篇文章主要介紹了vue+element的表格實(shí)現(xiàn)批量刪除功能示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-08-08
vue2.0與vue3.0及vue與react的區(qū)別及說明
這篇文章主要介紹了vue2.0與vue3.0及vue與react的區(qū)別及說明,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue如何動(dòng)態(tài)配置ip與端口
這篇文章主要介紹了vue如何動(dòng)態(tài)配置ip與端口，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
淺析Vue 中的 render 函數(shù)
在vue中我們使用模板HTML語法組建頁面的，使用render函數(shù)我們可以用js語言來構(gòu)建DOM，今天小編就通過本文給大家簡單介紹下Vue 中 render 函數(shù),需要的朋友可以參考下
2020-02-02
TypeScript踩坑之TS7053的問題及解決
這篇文章主要介紹了TypeScript踩坑之TS7053的問題及解決，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
Vue3嵌套路由中使用keep-alive緩存多層的實(shí)現(xiàn)
本文介紹了Vue3 嵌套路由中使用?keep-alive緩存多層的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04