下边例子全部采用的 <script setup>
这种组合式API写法,相对于选项式来说,组合式API这种写法更加自由。
下面将总结如下七种组件通信方式:
-
props
-
emit
-
v-model
-
refs
-
provide/inject
-
eventBus
-
vuex/pinia(状态管理工具)
下面例子均围绕这个demo来写:
一、Props方式
Props
方式是Vue中最常见的一种父传子的一种方式,使用也比较简单。
根据上面的demo,我们将数据以及对数据的操作定义在父组件,子组件仅做列表的一个渲染;
父组件代码如下:
<template>
<!-- 子组件 -->
<child-components :list="list"></child-components>
<!-- 父组件 -->
<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>
<script setup>
import { ref } from 'vue'
import ChildComponents from './child.vue'
const list = ref(['JavaScript', 'HTML', 'CSS'])
const value = ref('')
// add 触发后的事件处理函数
const handleAdd = () => {
list.value.push(value.value)
value.value = ''
}
</script>
子组件只需要对父组件传递的值进行渲染即可,代码如下:
<template>
<ul class="parent list-group">
<li class="list-group-item" v-for="i in props.list" :key="i">{
{ i }}</li>
</ul>
</template>
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
list: