一篇文章搞懂 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>