vue3父子，子父传值

一.父传子（自定义属性）

1.父组件：

<template>
  <div>
    <HelloWorld :getStrN="strN"></HelloWorld>
  </div>
  
</template>


<script setup>
import {ref} from 'vue'
import HelloWorld from './components/HelloWorld.vue'
let strN = ref("我是父组件的值") 

</script>

<style scoped>

</style>

2.子组件：

<template>
  <div>
    {{ getStrN }}
  </div>
</template>


<script setup>
import {defineProps} from 'vue'
// 父传子接收：props
let props = defineProps({
  getStrN:String
})


</script>

<style scoped>

</style>

第二种父传子 通过v-model：

父组件：

<template>
  <div>
    <HelloWorld v-model="strN" ></HelloWorld>
  </div>
</template>
<script setup>
import {ref} from 'vue'
import HelloWorld from './components/HelloWorld.vue'

let strN = ref("我是父组件的值") 
</script>

<style scoped>
</style>

子组件：

<template>
  <div>
    {{ modelValue }}
  </div>
</template>

<script setup>
// 父传子接收：props
let props = defineProps({
  modelValue:String
})

</script>

<style scoped>
</style>

二：子传父（自定义事件）

1.子组件：

<template>
  <div>
    {{ strN }}
    <HelloWorld @setSon="getSon"></HelloWorld>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import HelloWorld from './components/HelloWorld.vue'

let strN = ref("我是父组件的值") 

function getSon(val){
  strN.value=val;
}
</script>


<style scoped>
</style>

2.父组件：

<template>
  <div>
    <button @click="setSon">点击子传父</button>
  </div>
</template>


<script setup>


// 方法一：不建议
// import {getCurrentInstance} from 'vue'
// let name = "我是子组件的张三"
// let proxy = getCurrentInstance();
// function setSon(){
//   proxy.emit('setSon',name)
// }

// 方法二：
import {defineEmits} from 'vue'
let name = "我是子组件的张三"
let emit = defineEmits(["setSon"])
function setSon(){
  emit("setSon",name)
}

</script>

<style scoped>
</style>

三：父拿子：

1.父组件：

<template>
  <div>
    <HelloWorld ref="name" ></HelloWorld>
    <button @click="$refs.name.Son()">点击获取</button>
  </div>
</template>
<script setup>
import HelloWorld from './components/HelloWorld.vue'

</script>

<style scoped>
</style>

2.子组件：

<template>
  <div>
    
  </div>
</template>

<script setup>
// 必须要曝光 父才能拿到子
defineExpose({
  Son
})
function Son(){
  console.log("子组件");
}
</script>

<style scoped>
</style>

四：子拿父：

1.子组件：

<template>
  <div>
    <button @click="changeFatherData">点击</button>
  </div>
</template>

<script setup>
import { defineEmits } from "vue"
const emits = defineEmits(["closeFather"])

function changeFatherData() {
  emits("closeFather")
}
</script>
<style></style>

2.父组件：

<template>
<HelloWorld @closeFather="closeFather"></HelloWorld>
</template>

<script setup>
import HelloWorld from "./components/HelloWorld.vue"//引入子组件
const closeFather = () => {
  console.log("触发了父组件方法")
}
</script>

<style>
</style>