Vue3中的父子的值相互传递和组件的引用

1.父子的值相互传递

        1.1 父传子：

//父传子
<template>
  <div>
   <child :title="父传输的内容"></child>
  </div>
</template>
 
<script setup>
import child from '../child'
</script>
 
//父传子通过:title属性传递给子中的props下的title
//从而使子获取了父传递的值

  

//子接收数据
<template>
  <div>{{title}}</div>
</template>
 
<script setup>
import { toRefs, defineProps } from 'vue'
const props = defineProps({
  //子接收父传递过来的值
  title: String,
})
//使用父传递过来的值
const {title} =toRefs(props)
 
</script>

         1.2 子传父：

//子传父
<template>
  <button @click="Father">按钮</button>
</template>
 
<script setup>
import { defineEmits } from 'vue'
// 使用defineEmits创建名称，接受一个数组
const emit = defineEmits(['father'])
const Father=()=>{
  let params={
    text:'你好'
  }
  //传递给父
  emit('father',params)
}
</script>

//父接收
<template>
  <div>
  <!-- father是子组件绑定的事件，click是父组件接受方式 -->
   <Child  @father="child"></Child>
 </div>
</template>
 
<script setup>
import Child from '../Child'
import {ref} from 'vue'
const clicd=(row)=>{
  console.log(row);//row为子传过来的数据
}
</script>

1.组件引用

        1.1 vue2(无setup语法糖)：

<script>
import Hello from '../Hello.vue'
export default {
  components:{
    Hello
  },
}
</script>

        1.2 vue3(setup语法糖)：

<script setup>
import Hello from '../Hello.vue'
</script>

<template>
  <Hello/>
</template>

可以直接使用不需要写在
export default {
  components:{
    Hello
  },
}内