Vue3组件传值

---

Vue3组件传值

提示：先了解defineProps,和defineEmites

defineProps 等同与vue2 的props
语法：

defineProps({
xxx:{
	type:类型,
	default:xxx
}
})

defineEmites
语法:

const emit = defineEmites(["xxx"])
// 触发事件
const btn = () => {
	emit("xxx",需要传的值)
}

---

一、父传子

//父组件
<template>
  <div>
  	<common-child :msg1="age"></common-child>
  </div>
</template>
<script setup>
//引入子组件
import CommonChild from '../components/CommonChild.vue'
let bb = reactive({
  name:"xiaoming",
  age:18
})
let {name , age} = toRefs(bb)
</script>


//子组件
<template>
  <div>
    我是vue3子组件+{{ props.msg1 }}
  </div>
</template>

<script setup>
 let props = defineProps({
        msg1:{
            type:Number,
        }
})
</script>

二、子传父

//父组件
<template>
  <div>
  	<common-child :msg1="age"></common-child>
  	<button @pbtn="getChild">按钮</button>
  	{{txt}}
  </div>
</template>
<script setup>
//引入子组件
import CommonChild from '../components/CommonChild.vue'
let bb = reactive({
  name:"xiaoming",
  age:18
})
let {name , age} = toRefs(bb)
let txt = ref("")
//拿到子传给父亲的值 并赋值给txt 
const getChild = (value) => {
	txt.value = value
}
</script>


//子组件
<template>
  <div>
    我是vue3子组件+{{ props.msg1 }}
    <button @click="btn">按钮</button>
  </div>
</template>

<script setup>
 let props = defineProps({
        msg1:{
            type:Number,
        }
})
let str = ref("我是子组件传过来的值")
const emit = defineEmites(["pbtn"])
const btn = () => {
	emit("pbtn",str)
}
</script>

三、兄弟传值（Bus）

1.引入第三方库mitt

引入第三方库mitt，在src目录下创建plugins文件夹，在文件夹里面创建Bus.js文件
代码如下（Bus.js）：

import mitt from 'mitt'
const emiter = mitt()
export default emiter

2.在哥哥组件中导入

代码如下（示例）：

<template>
  <div>
  	哥哥组件
    <button @click="handel2">按钮</button>
  </div>
</template>
<script setup>
import emiter from "../plugins/Bus.js"
    let txt = ref("传给弟弟的值")
    const handel2 = () => {
        emiter.emit("cfn",txt)
    }
</script>

---

2.在弟弟组件中导入

代码如下（示例）：

<template>
    <div>
    我是弟弟组件
        {{str}}
    </div>
</template>

<script setup>
import emiter from '../plugins/Bus.js'
 let str = ref("")
 //这里可以拿到e.value 是哥哥组件传给弟弟的值，并赋值给str
 onBeforeMount(()=>{
    emiter.on("cfn",e=>{
        str.value = e.value
    })
 })
</script>

---

补充

子组件修改父组件传的值

子组件

<template>
  <div>
    我是vue3子组件+{{ props.msg1 }}
    <button @click="handel1">按钮1</button>
  </div>
</template>

<script setup>
 let props = defineProps({
        msg1:{
            type:Number,
        }
})
    const emit = defineEmits(["update:msg1"])   
    const handel1 = () => {
        console.log(111);
        emit("update:msg1",200)
    }
</script>

父组件

<template>
  <div>
    <common-child v-model:msg1="age"></common-child>
  </div>
</template>

<script setup>
import CommonChild from '../components/CommonChild.vue'
let bb = reactive({
  name:"xiaoming",
  age:18
})
let {name , age} = toRefs(bb)
</script>

在defineEmites(),中传入固定参数update:某父组件传来的值，就可以修改父组件的值