vue3组件传值方式

父组件向子组件传值

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>