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

在Vue中，通常會自定義組件來實現頁面上的渲染。頁面需求中可能會有需要通過頁面點擊事件來控制各個板塊的值，那么如何在父組件的事件中來控制自定義子組件的值呢？我這里總結了我用到的兩種方法。

1、通過vuex存儲數據來控制值；

2、通過dom頁面調用子組件中的事件。

第一種：通過vuex存儲數據來控制值

（1）現在假設一個場景：通過自定義組件寫一個年月日或者省市區的控件，然后在父組件中，需要通過保存按鈕獲取子組件的值。還要通過清空按鈕改變子組件中的值，使其值達到初始值或空值的狀態。

代碼直接上：

父組件：

<time-picker :year="year" :month="month" :day="day"></time-picker>
<div class="te_center m_top_20">
     <van-button type="default" @click="clearTime">清空</van-button>
     <van-button type="primary" @click="searchTime">提交</van-button>
</div>

子組件：

 

 父組件頁面中，外部獲取到數據之后，通過設置數據的時間，將值存入vuex中。

通過點擊清空按鈕，通過清空數據的事件，改變vuex中相應的值。

 

 然后定義store中的js文件：

 

 

 

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

 

第二種：通過dom頁面調用子組件中的事件

代碼直接上：

父組件：

<price-input v-model="ruleForm.sellPriceStart" style="width: 120px;" ref="input" placeholder="起始價格"></price-input>

父組件中點擊事件時，通過操作dom來進行子組件事件的調用。

this.$refs.input.clearInput();

子組件中定義清空數據的方法：

 methods: {
     clearInput(){
            this.inputNumber = '';
        }
    }

總結：父組件可以通過dom使用子組件的事件（方法）

 

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