父组件向子组件传值
1、简单的props方式
//fater.vue
<div class="father">
<children :carr="arr" />
</div>
<script setup lang="ts">
import children from './children.vue'
const arr = [1, 3, 5]
//children.vue
<div class="children">
<div>carr:{{ carr }}</div>
</div>
<script setup lang="ts">
defineProps({
carr: {
type: Array,
required: true
}
})
子组件向父组件传值
1、函数方式
//fater.vue
<div class="father">
<children :carr="fatherFun" />
</div>
<script setup lang="ts">
import children from './children.vue'
const fatherFun = (n: number) => {
console.log('父组件函数,接收到子组件的值为：', n)
}
//children.vue
<div class="children">
<div @click="onUp(3)">carr:</div>
</div>
<script setup lang="ts">
const props = defineProps({
carr: {
type: Function,
required: true
}
})
function onUp(n: number) {
console.log('子组件函数')
props.carr(n)
}
/*
结果为：
子组件函数
父组件函数,接收到子组件的值为： 3
*/
2、emit方式
//father.vue
<div class="father">
<children :carr="arr" @getChildren="oncFun" />
</div>
<script setup lang="ts">
import children from './children.vue'
const arr = [1, 3, 5]
function oncFun(x: number) {
console.log('父组件函数,接收到子组件的值为:', x)
}
//children.vue
<div class="children">
<div @click="onUp(3)">carr:</div>
</div>
<script setup lang="ts">
const props = defineProps({
carr: {
type: Array,
required: true
}
})
//setup中使用emits,需要先声明，定义属性数量
const emits = defineEmits(['getChildren'])
function onUp(n: number) {
console.log('子组件函数')
emits('getChildren', n)
}
3、provide与inject
适用于层级比较多，如爷孙组件传值。结合传函数的方式，可以让爷孙组件相互传值
父组件
provide('stateFun', (x) => {
console.log('x',x)
})
孙组件
Function代表注入的是函数，true代表有传入参数
const stateFun = inject('stateFun', Function, false)
stateFun('abc')
用provide和inject 会遇上类型问题，子组件接收到的是unknown类型
所以用 InjectionKey 类型声明来定义值（做名称）
**新建一个type.ts**
import { InjectionKey, Ref } from 'vue'
export interface User {
name: string
age: number
}
// 对象的InjectionKey
export const userKey: InjectionKey<Ref<User>> = Symbol('')
**父组件中**
const user = ref({ name: 'tom', age: 20 })
provide('user', user) //普通的传值
provide(userKey, user) //类型声明的传值
**子组件中**
import { userKey } from './type'
const user: any = inject('user') //user: unknown 无法点操作，所以声明为any
console.log('inject:', user.value.name) //tom
const user2 = inject(userKey) //user2: Ref<User> | undefined
console.log('injectKey:', user2) // RefImpl {...}
4、vuex或pinia方式
之前的文章有独立介绍
子组件接收到的props
1、如果是ref类型，值有任何变动都会自动触发更新，也能触发子组件的watch
2、props都是单项数据流，若希望将其作为子组件本地的数据来使用，可以赋给data 或 (setup中常 赋给计算属性 )
const props = defineProps({
carr: {
type: Array,
required: true
}
})
const cptA = computed(() => props.carr)
3、props单项数据流，在子组件中是无法修改的。如果就想改变props的值，也只能在父组件中修改。用v-model可以让父组件中修改更便捷
v-model用法
v-model相当于传递了 modelValue，并接收抛出的 update:modelValue 事件
<div class="father">
{{ arr }}
<children v-model="arr" />
</div>
<script setup lang="ts">
import { ref } from 'vue'
import children from './children.vue'
const arr = ref([1, 3, 5])
<div class="children">
<div @click="editProps">carr:{{ modelValue }}</div>
</div>
<script setup lang="ts">
import { computed } from '@vue/reactivity'
const props = defineProps({
//这个是v-model的固定搭配名称, 若父组件是v-model:abc，那这里就是abc
modelValue: {
type: Array,
required: true
}
})
//update:modelValue 是v-model的固定搭配
//如父组件是 v-model:abc，那这里就是['update:abc']
const emits = defineEmits(['update:modelValue'])
const editProps = () => {
console.log('向上冒泡')
emits('update:modelValue', [2, 4, 6])
}
//点击后结果为： [2, 4, 6]，当然子组件template中显示的也会变成246
父组件访问子组件的方法或变量
父组件是不能直接访问子组件的方法。需要子组件手动的抛出：defineExpose()
<script setup>
import { defineExpose，ref } from "vue"
const data = ref("")
function clear(){
data.value = ""
}
defineExpose({ clear })
</script>
