vue3组件间通信setup版

1. props和emits(父子通信)

当父类引用子类时使用在子组件上面添加属性的语法，传给子类，子类在接收属性的时候需要用defineProps接收。当父组件传入方法的时候，子组件用defineEmits接收，只要子组件触发发，父组件就能够接收到，子类就像调用回调函数一样，通过emit触发函数，传入你想要修改的参数。举个栗子

这是父类

js 复制代码

<template>
    <div>
        <!-- 父类给子类传参-->
        <Son @changeAge="changeAge" //传方法
          :name="person.name" :age="person.age" /> //传属性
    </div>
</template>


<script setup>
import Son from './Son.vue';
import { reactive } from 'vue';
const person = reactive({
    name: 'Tina',
    age: 19
})
const changeAge = (age) => {
    console.log(`子组件过来改数据了,参数是${age}`)
    person.age = age;
}
</script>

这是子类

js 复制代码

<template>
    <div>
        ---子类Son---
        姓名 {{ name }}-年龄{{ age }}
        <button @click="change">改变年龄</button>
    </div>
</template>


<script setup>
const props = defineProps({
    name: String,
    age: Number
})
const emit = defineEmits(['changeAge']);
const change = () => {
    emit('changeAge', 99);
}


</script>

2. defineExpose

父组件通过ref来访问子组件暴露出来的属性和方法，ref需要放在onMounted，即dom元素挂载之后进行获取

js 复制代码

    <template>
        <div>
            Son组件
        </div>
    </template>

    <script setup>
    import { reactive ,defineExpose} from 'vue';
    const item = reactive({name:'susan',age:19});
    const addItem = ()=>{
        console.log('调用了子组件的addItem方法');
    }
    defineExpose({item,addItem});

    </script>

js 复制代码

    <template>
        <div>
            <Son ref="sonRef" />
        </div>
    </template>

    <script setup>
    import Son from '@/components/Son.vue'
    import { onMounted, reactive, ref } from 'vue';
    const sonRef = ref(null);
    onMounted(()=>{
        console.log(sonRef.value);  //挂载后取
        sonRef.value.addItem();
    })
    console.log(sonRef.value);  //此时为空

3. Provide/Inject

作用：实现祖与后代组件间通信
套路：父组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来开始使用这些数据

具体写法：

祖组件中：

js 复制代码

    <template>
        <div>
            <Son ref="sonRef" :list="list" />
        </div>
    </template>

    <script setup>
    import Son from '@/components/Son.vue'
    import {provide, reactive, ref } from 'vue';
    const list = reactive([
        { name: 'tina', age: 19 },
    ]);
    provide('list',list);

    setInterval(() => {
        list.push({name:'sulin',age:10})
    }, 3000);  //定时器测试
    </script>

后代组件中：

js 复制代码

    <template>
        <div>
            <ul>
                <li v-for="item in list">{{ item }}</li>
            </ul>
        </div>
    </template>

    <script setup>
    import { reactive, defineExpose } from 'vue';
    defineProps({
        list: Array
    })

4. attrs

描述：接收父组件的props但没有被defineProps接收的属性

用法:

js 复制代码

    import {useAttrs } from 'vue';
    const attrs = useAttrs();
    console.log(attrs);

在上面的例子中父组件再传入一个index 这个index没有被defineProps，就会出现在attrs