vue3 父传子 子传父

?父传子

<template>
  <div id="app">
    <index1 :money="money"></index1>
  </div>
</template>
 
<script lang="ts" setup>
  import index1 from './view/index.vue'
  import { ref } from 'vue'
 
  let money = ref(1000000000000)
 
</script>
 
<style scoped>
#app {
  width: 100vw;
  height: 100vh;
  color: #000;
  padding: 50px;
  box-sizing: border-box;
}
</style>

<template>
  <div class="index1">
    <h1>子组件1</h1>
      {{ money }}元
    </h3>
  </div>
</template>
 
<script setup lang="ts">
  import { ref } from 'vue'
  // porps:实现父子组件通信，props数据还是只读
  // 组合式api 使用 defineProps 接收父子组件传递过来的数据，可以是数组也可以是对象，
  //不需要引入  template中可直接使用
  const porps = defineProps(['money'])
  console.log(porps)
 
</script>
 
<style lang="scss" scoped>
.index1 {
  background-color: azure;
  padding: 12px;
}
</style>

子传父

<template>
  <div id="app"> 
    <h1>父组件</h1>
    <h3>富一代资产{{ money }}元</h3>
    <index1 :money="money" @xxx="handlerXXX"></index1>
    <h3>{{ son }}</h3>    
  </div>
</template>
 
<script lang="ts" setup>
 
  import index1 from './view/index.vue'
  import { ref } from 'vue'
 
  let money = ref(1000000000000)
  let son = ref('')
  const handlerXXX = (value: string) => {
    son.value = value
  }
 
</script>
 
<style scoped>
#app {
  width: 100vw;
  height: 100vh;
  color: #000;
  padding: 50px;
  box-sizing: border-box;
}
</style>

<template>
  <div class="index1">
    <h1>子组件1</h1>
    <h3>儿子不知道父亲有{{ porps.money }}元</h3> 
     <h3>
      儿子知道了会争这{{ money }}元（template中可以直接省略porps---script中无法省略！）
    </h3>
    <p>
       vue2中 @click是自定义事件，可以通过.native修饰符变为原生DOM事件。
       在vue3中@click是原生DOM事件
     </p>
     <el-button @click="handlerClick">自定义事件</el-button>
  </div>
</template>
 
<script setup lang="ts">
  import { ref } from 'vue'
  //------porps-------
  // porps:实现父子组件通信，props数据还是只读
  // 组合式api 使用 defineProps 接收父子组件传递过来的数据，可以是数组也可以是对象，
  //不需要引入  template中可直接使用
  const porps = defineProps(['money'])
  console.log(porps)
 
  //------$emit-------
  //defineEmits方法返回函数出发自定义事件，不需要引入 直接使用
  const $emit = defineEmits(['xxx'])
  const handlerClick = () => {
    console.log('触发自定义事件')
    $emit('xxx', '富二代上交9999元给富一代') 
  }
 
</script>
 
<style lang="scss" scoped>
.index1 {
  background-color: azure;
  padding: 12px;
}
</style>