setup语法糖父子传值

1,父传子

儿子One.vue

<template>
<div>
    <h1>一个儿子</h1>
    {{one}}
    {{str}}
</div>
</template>
<script setup>
   import {defineEmits,defineProps} from "vue";
   const props = defineProps({
       one:{type:Number},
       str:{type:String}
   })
</script>
<style scoped>
</style>

父亲HomeView.vue

<template>
  <div class="home">
      <One :one="a" str="this is a test"></One>
  </div>
</template>

<script setup>
import One from "@/views/One";
import {defineProps,defineEmits} from "vue";
components:{
    One
}
let a = 10
</script>

2.子传父

儿子One.vue

<template>
<div>
    <h1>一个儿子</h1>
    {{one}}
    {{str}}
<!--    ---------------------------------->
    <button @click="func('hello')">点击传值</button>
</div>
</template>
<script setup>
   import {defineEmits,defineProps} from "vue";
   const props = defineProps({
       one:{type:Number},
       str:{type:String}
   })
   const emit = defineEmits('func')
   const func = str=>{
        emit('printStr',str)
   }
</script>
<style scoped>
</style>

父亲HomeView.vue

<template>
  <div class="home">
      <One :one="a" str="this is a test" @printStr="func"></One>
  </div>
</template>

<script setup>
import One from "@/views/One";
import {defineProps,defineEmits} from "vue";
let a = 10
function func(str){
    console.log(str+'##########')
}
</script>

3.子传父想把传的内容写在页面中，不在控制台输出

父亲HomeView.vue

<template>
  <div class="home">
      <One :one="a" str="this is a test" @printStr="func"></One>
      {{result}}
  </div>
</template>
<script setup>
import One from "@/views/One";
import {defineProps, defineEmits, ref} from "vue";
let a = 10
const result = ref('')
const func = (str) =>{
    result.value = str
}
</script>

儿子One.vue不变