Vue3组件传参方法

传参方式常用的方法有以下几种

1，emit

<template>
  <div>
    子组件: <button @click="childEmit">传值给父组件</button>
  </div>
</template>
<script>
export default {
    setup(props,{emit}){ //分解context对象取出emit
        function childEmit(){
            emit('my-emit','我是子组件值')
        }
        return{
            childEmit
        }
    }
};
</script>

<template>
  <div>
    父组件 <child @my-emit="parentEmit"></child>
  </div>
</template>

<script>
import Child from "./Child.vue";
import { ref } from "vue";
export default {
  components: {
    Child,
  },
  setup() {
    function parentEmit(val){
        alert(val)
    }
    return{
        parentEmit
    }
  },
};
</script>

运行结果：

Vue3取消了this上下文，this.$emit咋整

Vue3的setup函数提供了两个参数 props和context

参数	Value
props	不可变的组件参数
context	Vue3暴露出来的属性（emit,slots,attrs）

所以访问就变成了这种形式

this.xxx ====》context.xxx

2，props

<template>
    <div>
        <div>{{msg}}</div>
        <div>{{str}}</div>
    </div>
</template>
<script>
import {computed} from 'vue'
export default {
    props:{
        msg:String
    },
    setup(props){//提供的函数props直接用就完事了嗷~~~
        const str = computed(()=>{
            return '父组件值为：'+ props.msg
        })
        return{
            str
        }
    }
}
</script>

<template>
    <child :msg="msg"></child>
</template>
<script>
import Child from './Child.vue'
import {ref} from 'vue'
export default {
    components:{
        Child
    },
    setup(){
        const msg = ref('I am father value!')
        return{
            msg
        }
    }
}
</script>

运行结果：

3，provide和inject

<template>
    <child ref="HelloWorld"></child>
</template>
<script>
import Child from './Child.vue'
import {reactive,provide} from 'vue'
export default {
    components:{
        Child
    },
    setup(){
        const state = reactive({msg:'1234'})
        provide('proMsg',state)
        return{
            state
        }
    }
}
</script>

<template>
    <div>
        <h1>{{ofMsg.msg}}</h1>
    </div>
</template>
<script>
import {inject,ref} from 'vue'
export default {
    setup(){
        const ofMsg = inject('proMsg',ref('none'))
        return{
            ofMsg
        }
    }
}
</script>

运行结果：

参考地址：https://blog.csdn.net/qq_44839718/article/details/109050546?spm=1001.2014.3001.5501