props
父组件向子组件传值
//父组件
<template>
<home-child :name="name"/>
</template>
<script>
data() {
return {
name: 'harry'
}
},
</script>
//子组件
<template>
<div>父组件传来的值Name：{{name}}</div>
</template>
<script>
props: {
name: String
}
</script>
image.png
依赖注入
当组件层级过深时，props就会比较麻烦，需要一层一层传递，这时我们可以使用依赖注入，一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。
- Provide (供给)
要为组件后代供给数据，需要使用到provide选项
（为配合响应性，我们可将供给的值转换为一个计算属性） - Inject (注入)
要注入祖先组件供给的数据，需使用inject选项
注入可设置别名和默认值
//父组件
export default {
provide: {
message: 'hello'
}
}
//子组件
<template>
<div>依赖注入传递归来的值message：{{message}}</div>
</template>
export default {
inject: ['message']
}
image.png
$emit
在组件的模板表达式中，可以直接使用$emit函数触发自定义事件
$emit函数同样也是组件实例上的方法：this.$emit()
父组件可以通过 v-on (缩写为 @) 来监听事件
//父组件
<template>
<home-child @btnClick = 'btnClick'/>
</template>
export default {
methods: {
btnClick() {
alert('触发事件')
}
}
}
//子组件
<template>
<div class="box" @click="btnClick"></div>
</template>
export default {
emits: ['btnClick'], //显示的声明要触发的事件
methods: {
btnClick() {
this.$emit('btnClick')
}
}
}
image.png
ref
- ref 是一个特殊的 attribute，它允许我们在一个特定的 DOM 元素或子组件实例被挂载后，获得对它的直接引用
- 只可以在组件挂载后才能访问 ref
- 如果一个子组件使用的是选项式 API ，被引用的组件实例和该子组件的 this 完全一致，这意味着父组件对子组件的每一个属性和方法都有完全的访问权。这使得在父组件和子组件之间创建紧密耦合的实现细节变得很容易，当然也因此，应该只在绝对需要时才使用组件引用。大多数情况下，你应该首先使用标准的 props 和 emit 接口来实现父子组件交互
//父组件
<template>
<home-child ref= 'home_child'/>
</template>
export default {
mounted() {
let child = this.$refs.home_child //拿到子组件的实例
console.log(child.age); //11 访问子组件的属性
}
}
//子组件
export default {
data() {
return {
age: 11
}
}
}
vuex
如果业务逻辑复杂，很多组件需要处理一些相同的信息，采用普通的方式就会处理困难，vuex可以帮助我们把一些公共的数据抽离出来，便于其他组件处理，变更状态
setup()
vue3提供了一种新方法来进行组件之间的数据传递setup()
我们在组件中用到的数据和方法，都定义在setup配置项中
//子组件
<template>
<div class="home-child">
<h4>子组件</h4>
<div>父组件传来的值: {{title}}</div>
<button @click="btnClick">向父组件说话</button>
</div>
</template>
<script>
export default {
name: 'HomeChild',
props: {
title: String
},
setup(props, {emit}) {
let ask = '我是子组件，我向父组件说话'
const btnClick = () => {
emit('btnClick', ask)
}
return {
btnClick
}
}
}
</script>
//父组件
<template>
<div id="home">
<h3>父组件</h3>
<div>子组件说：{{children_mes}}</div>
<home-child :title="title" @btnClick='btnClick'/>
</div>
</template>
<script>
import { ref } from 'vue'
import HomeChild from './childComps/HomeChild.vue'
export default {
name: 'Home',
components: {HomeChild},
setup() {
let title = '我是父组件传来的值'
let children_mes = ref('')
const btnClick = mes => {
children_mes.value = mes
}
return {
title,
children_mes,
btnClick
}
}
}
</script>
image.png
当点击按钮时，子组件向父组件发送信息
image.png
