Vue3传值方法

组件传值

父向子

1 在子组件中使用defineProps

defineProps({

    自定义属性名: {

        type: 数据类型

    }

})

2 在父组件中找到子组件标签 在子组件标签上使用v-bind:自定义属性名="要发送的数据"

<子组件标签 v-bind:自定义属性名="要发送的数据"></子组件标签>

3 在子组件中将自定义属性名直接当做data来使用

<标签>{{自定义属性名}}</标签>

​
//这是子组件

<template>
    <div >
        {{data}}        //直接当作data使用
    </div>
</template>



<script setup>
defineProps({
    data: {
        type: String        //接收传递的值
    }
})
</script>

​

//父组件

<template>
    <ul>
        <List :data="data"></List>    //子组件标签
    </ul>
</template>


<script setup>
import List from './List.vue'

import { ref, reactive } from 'vue';

const data = ref('传送的数据');


</script>

子向父

    1 在子组件中绑定事件 使用defineEmits来发送数据

    <button @click="事件名"></button>

    const emit=defineEmits()

    const 事件名=()=> {

        emit("自定义方法名",要发送的数据)

    }

    2 在父组件找到子组件标签 使用@自定义方法名="新的方法名"

    <子组件标签 @自定义方法名="新的方法名"></子组件标签>

    3 在父组件中编写新的方法 有一个默认参数 就是子组件传递过来的数据

    const 新的方法名=data=> {

        console.log(data)  // data就是子组件传递过来的数据

    }

非父子

    1 安装mitt插件 并且创建bus.js文件

    npm i mitt --save-dev

    import mitt from 'mitt'

    const bus=new mitt()

    export default bus

    2 在需要发送数据的组件中 自定义事件使用bus.emit()发送数据

    import bus from '路径'

    const 自定义事件=()=> {

        bus.emit("方法名",要发送的数据)

    }

    3 在需要接受数据的组件中 使用bus.on()来接受数据

    bus.on("方法名",data=> {

        console.log(data)  // data就是传递的数据

    })

4 非父子组件传值(provide和inject)

    使用场景:

    可以实现非父子组件的传值(父组件的子组件的子组件的...)

    1 需要在发送数据的组件中 使用provide("自定义属性名",要发送的数据)

            import {provide} from 'vue'

            provide("自定义属性名",要发送的数据)

    2 在需要接受数据的组件中 使用inject("自定义属性名") 来获取数据

            import {inject} from 'vue'

            inject("自定义属性名") 来获取数据