Vue3的七種組件通信方式
來自:?一碗周
https://juejin.cn/post/7062740057018335245
寫在前面
本篇文章是全部采用的?
復(fù)制代碼
子組件只需要對父組件傳遞的值進(jìn)行渲染即可，代碼如下：
??<ul?class="parent?list-group">
????<li?class="list-group-item"?v-for="i?in?props.list"?:key="i">{{?i?}}li>
??ul>
</template>
復(fù)制代碼
在父組件中只需要監(jiān)聽子組件自定義的事件，然后執(zhí)行對應(yīng)的添加操作。
v-model方式
v-model是Vue中一個比較出色的語法糖，就比如下面這段代碼
"pageTitle"?/>
復(fù)制代碼
就是下面這段代碼的簡寫形勢
"pageTitle"?@update:title="pageTitle?=?$event"?/>
復(fù)制代碼
v-model確實簡便了不少，現(xiàn)在我們就來看一下上面那個demo，如何用v-model實現(xiàn)。
子組件
??<div?class="child-wrap?input-group">
????<input
??????v-model="value"
??????type="text"
??????class="form-control"
??????placeholder="請輸入"
????/>
????<div?class="input-group-append">
??????<button?@click="handleAdd"?class="btn?btn-primary"?type="button">
????????添加
??????button>
????div>
??div>
</template>
復(fù)制代碼
refs方式
在使用選項式API時，我們可以通過this.$refs.name的方式獲取指定元素或者組件，但是組合式API中就無法使用哪種方式獲取。如果我們想要通過ref的方式獲取組件或者元素，需要定義一個同名的Ref對象，在組件掛載后就可以訪問了。
示例代碼如下：
??<ul?class="parent?list-group">
????<li?class="list-group-item"?v-for="i?in?childRefs?.list"?:key="i">
??????{{?i?}}
????li>
??ul>
??