props 父组件传子组件,是一种简单的方式示例，关键api: defineProps,示例代码如下：

父组件代码如下：

  <Children :myprops="myTest"/>
   <div class="logo-container">
    <img src="@/assets/logo/huaJian.png" alt="">
   </div>
   <div class="bill-pannel">
   </div>
   <Rotation/>
</template>
<script setup  lang="ts">
import Children from '../components/children.vue'
import { ref } from 'vue';
const myTest = ref('myPropsText')

子组件代码如下：

  <div>children</div>
  <div>{{ props.myprops }}</div>
</template>
<script setup lang='ts'>
import { defineProps } from 'vue'
const props=defineProps(['myprops'])
</script>`

自定义事件(emit)通信方式，关键api:defineEmits，示例代码如下：

父组件代码：

  <Children  @emitsHanddler='handdler' />
  <div>{{ count }}</div>
</template>

<script setup  lang="ts">
import Children from '../components/children.vue'
import { ref } from 'vue';
const count = ref(2)

const handdler = (data) => {
  console.log('father',count)
     count.value+=1
 }
</script>

子组件代码如下：

  <div @click='handdler'>children</div>
</template>
<script setup lang='ts'>
import { defineEmits } from 'vue'
const emits = defineEmits(['emitsHanddler'])
const handdler = () => {
  console.log('children start');
  emits('emitsHanddler')
}
</script>

v-model 也是一种平常的方式，相当于自定义事件+props简写

父组件代码如下：

  <Children  v-model:title="title" />
</template>

<script setup  lang="ts">
import Children from '../components/children.vue'
import { ref } from 'vue';
const count = ref(2)
const title=ref('title')
const handdler = (data) => {
  console.log('father',count)
     count.value+=1
 }
</script>

子组件代码如下：

  <div @click='handdler'>children</div>
  <div>{{ props.title }}</div>
</template>
<script setup lang='ts'>
import { defineEmits ,defineProps } from 'vue'
const emits = defineEmits(['update:title'])
const props = defineProps (['title'])

const handdler = () => {
  console.log('children start');
  emits('update:title',96)
}
</script>

ref 需要注意的是ref变量命名必须要与子组件ref属性变量名一样，子组件需要导出方法(变量)，示例代码如下：

父组件代码：

  <Children ref="myChildrenRef"/>
  <div>
   'father: ' {{  myChildrenRef?.childrenValue}}
  </div>
</template>

<script setup  lang="ts">
import Children from '../components/children.vue'
import { ref } from 'vue';
const myChildrenRef = ref(null)
const handdler = (data) => {
 }
</script>

子组件代码：

  <div @click='handdler'>children</div>
</template>
<script setup lang='ts'>
import { ref,defineExpose } from 'vue'
const childrenValue=ref('childrenValue')

const handdler = () => {
}
defineExpose({
  childrenValue
})
</script>

provide和inject是Vue中提供的一对API，该API可以实现父组件向子组件传递数据，无论层级有多深，都可以通过这对API实现，有个缺点就是inject 下去的变量没有响应式 代码如下：

父组件：

  <Children/>
</template>

<script setup  lang="ts">
import Children from '../components/children.vue'
import { ref,provide } from 'vue';
const msg = ref('father')
provide('msg',msg.value)
const handdler = (data) => {
 }
</script>

子组件

  <div @click='handdler'>children</div>
  <div>children1: {{  fatherMsg }}</div>
</template>
<script setup lang='ts'>
import { inject } from 'vue'
const handdler = () => {
}
const fatherMsg=inject('msg')
</script>