一篇文章搞懂 Vue3 的 7 种组件通信方式
前端达人
共 513字，需浏览 2分钟
·
2022-02-22 10:17
写在前面
本篇文章是全部采用的
复制代码
子组件只需要对父组件传递的值进行渲染即可，代码如下：
<ul class="parent list-group">
<li class="list-group-item" v-for="i in props.list" :key="i">{{ i }}li>
ul>
</template>
复制代码
在父组件中只需要监听子组件自定义的事件，然后执行对应的添加操作。
v-model方式
v-model是Vue中一个比较出色的语法糖，就比如下面这段代码
"pageTitle" />
复制代码
就是下面这段代码的简写形势
"pageTitle" @update:title="pageTitle = $event" />
复制代码
v-model确实简便了不少，现在我们就来看一下上面那个demo，如何用v-model实现。
子组件
<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>
复制代码
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>