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>
  1. 后代组件中:
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

相关推荐
小飞悟20 分钟前
那些年我们忽略的高频事件,正在拖垮你的页面
javascript·设计模式·面试
绅士玖23 分钟前
📝 深入浅出 JavaScript 拷贝:从浅拷贝到深拷贝 🚀
前端
中微子32 分钟前
闭包面试宝典:高频考点与实战解析
前端·javascript
brzhang33 分钟前
前端死在了 Python 朋友的嘴里?他用 Python 写了个交互式数据看板,着实秀了我一把,没碰一行 JavaScript
前端·后端·架构
G等你下课1 小时前
告别刷新就丢数据!localStorage 全面指南
前端·javascript
该用户已不存在1 小时前
不知道这些工具,难怪的你的Python开发那么慢丨Python 开发必备的6大工具
前端·后端·python
爱编程的喵1 小时前
JavaScript闭包实战:从类封装到防抖函数的深度解析
前端·javascript
LovelyAqaurius1 小时前
Unity URP管线着色器库攻略part1
前端
Xy9101 小时前
开发者视角:App Trace 一键拉起(Deep Linking)技术详解
java·前端·后端
lalalalalalalala1 小时前
开箱即用的 Vue3 无限平滑滚动组件
前端·vue.js