vue3父子组件通信

一、父->子

1、单层

1、父组件

<template>
  <div>
    <el-button type="success" @click="change">打开子组件</el-button>
    <Screen v-if="open" :name="name"/>
  </div>
</template>

<script>
import { ref,reactive } from 'vue'

//1、引入子组件
import Screen from '@/views/screen'

export default {
    name: 'Home',
    //2、声明子组件
    components: {Screen},
    setup() {
        //创建、销毁子组件使用，保证向子组件传递的值会更新
        let open=ref(false)
        
        //向子组件传递的参数
        let name=ref('kimi')

        //打开子组件
        function change(){
            name.value='sally'
            open.value=true
        }

        return {
            open,
            name,
            change
        }
    }
}
</script>

2、子组件

import { ref } from 'vue'

export default {
    name: "Screen",
    //1、接收子组件的传参
    props:{
        //此时name也是一个变量，也可以在模板中使用，而且不需要open的值影响，也会跟随父组件的值而更新
        name:{
            type:String,
            default:null
        }
    },
    setup(props){
        //2、使用props中的值
        const username=ref(props.name)

        return{
            username
        }
    }
}

2、多层

• 父子通信单层使用props、emit，当多层嵌套时，孙子组件获取爷爷组件的值会很麻烦，需要层层传递
• 使用provide、inject可以解决这个问题，无论嵌套多深，所有的子孙组件都可以方便的获取祖籍组件提供的值

1、父组件

<template>
  <div>
    <Screen />
  </div>
</template>

<script>
//引入provide函数
import { ref,reactive,provide } from 'vue'

//引入子组件
import Screen from '@/views/screen'

export default {
    name: 'Home',
    //声明子组件
    components: {Screen},
    setup() {
        //包装成响应式对象，子孙组件才会随着父组件的值改变而更新
        let user=reactive({
            name: 'kimi',
            age: 18
        })

        //放入数据：provide(name,value)
        provide('user', user)

        return {
            user
        }
    }
}
</script>

2、孙子组件

//引入inject函数
import { inject } from 'vue'

export default {
    name: "Screen",
    setup(){
        //inject(name,default)：name：key，default：默认值
        const user=inject('user')

        return{
            user
        }
    }
}

二、子->父

1、单层

1、父组件

<template>
  <div>
    <!-- 传递自定义事件 -->
    <Screen @changeVal="changeVal"/>
  </div>
</template>

<script>
import { ref } from 'vue'
//1、引入子组件
import Screen from '@/views/screen'

export default {
    name: 'Home',
    //2、声明子组件
    components: {Screen},
    setup() {
        let name=ref('kimi')

        //定义改变父组件值得方法
        function changeVal(val){
            name.value=val
        }

        return {
            name,
            changeVal
        }
    }
}
</script>

2、子组件

import { ref } from 'vue'

export default {
    name: "Screen",
    //1、声明父组件传递过来得自定义事件
    emits: ['changeVal'],
    setup(props,{emit}){
        
        function changeParentVal(){
            //调用的时间名、传递的值
            emit('changeVal','tony')
        }

        return{
            changeParentVal
        }
    }
}