Vue如何在父元件頁面的方法事件中控制子元件中的值

2022-07-30 14:24:22 字數 1151 閱讀 5342

在vue中,通常會自定義元件來實現頁面上的渲染。頁面需求中可能會有需要通過頁面點選事件來控制各個板塊的值,那麼如何在父元件的事件中來控制自定義子元件的值呢?我這裡總結了我用到的兩種方法。

1、通過vuex儲存資料來控制值;

2、通過dom頁面呼叫子元件中的事件。

第一種:通過vuex儲存資料來控制值

(1)現在假設乙個場景:通過自定義元件寫乙個年月日或者省市區的控制項,然後在父元件中,需要通過儲存按鈕獲取子元件的值。還要通過清空按鈕改變子元件中的值,使其值達到初始值或空值的狀態。

**直接上:

父元件:

清空     提交

子元件:

父元件頁面中,外部獲取到資料之後,通過設定資料的時間,將值存入vuex中。

通過點選清空按鈕,通過清空資料的事件,改變vuex中相應的值。

然後定義store中的js檔案:

這樣定義了清空和設定的事件之後,就可以在父頁面去相應的改變值了。

第二種:通過dom頁面呼叫子元件中的事件

**直接上:

父元件:

placeholder="起始**">
父元件中點選事件時,通過操作dom來進行子元件事件的呼叫。

this.$refs.input.clearinput();
子元件中定義清空資料的方法:

methods: 

}

總結:父元件可以通過dom使用子元件的事件(方法)

這是我想到的兩種方法來優化自定義元件的值控制問題。因為vuex知識比較薄弱,只是簡單的嘗試了乙個demo,可能有一些出錯的地方或說法,僅作為自己的學習記錄。大神勿噴~~~

Vue 如何在父元件中使用子元件

首先簡單回顧一下定義元件用到的引數。components 定義乙個新的元件 template 書寫元件中的html內容,用一對 括起來 首先一開始,先寫一下子元件的內容,因為要多次呼叫所以賦給了變數child var child 接下來,寫一下父元件的內容,同時在父元件中使用到了子元件,所以加入了c...

Vue 父元件如何觸發子元件中的方法

子元件 child 父元件 點選 1.首先父元件匯入子元件並且在components中定義子元件 2.引用子元件,並定義ref,用於 this.refs.mychild 呼叫 3.呼叫子元件的方法 parenthandleclick 為子元件的方法 注 在呼叫子元件的方法時 this.refs.my...

vue父元件觸發子元件方法

通常來說是子元件觸發父元件的情況比較多。比如每次提交表單的時候封裝了常用的選項類子元件,選好值之後將值傳回父元件,父元件得到值這樣的操作。這是不用初始化頁面資料的情況。但是還有其他的情況就是已經選好了謀個服裝的品牌和品牌下的某個系列後 這是兩個相同的元件但是在父元件不同的地方呼叫 這時候我想換個品牌...