vue3.0-setup中的组件通信

① 父传子

--父组件中的代码

<template>
<h1>这是父组件</h1>
  <component :is="sonView" :title="title" :name="name"></component>
</template>

<script setup>
import sonView from '@/components/sonView'
import {ref} from "vue";
const title = ref('这是父组件的标题')
const name = ref('小明')
</script>

--子组件中的代码

<template>
<h1>这是子组件</h1>
  <h2>这是接收的父组件的数据:{{props}}</h2>
  <h3>{{title}}</h3>
  <h3>{{name}}</h3>
</template>

<script setup>
import {toRefs} from "vue";

const props = defineProps(['title','name'])
const {title,name} = toRefs(props)

</script>

②子传父

--子组件中的代码

<template>
<h1>这是子组件</h1>
  <h2>这是接收的父组件的数据:{{props}}</h2>
  <button @click="update">子组件修改父组件的数据</button>
  <h3>{{title}}</h3>
  <h3>{{name}}</h3>
</template>

<script setup>
import {toRefs} from "vue";

const props = defineProps(['title','name'])
const {title,name} = toRefs(props)

let emits = defineEmits(['change'])
const update = ()=>{
  emits("change")
}
</script>

--父组件中的代码

<template>
<h1>这是父组件</h1>
  <h2>Number的数字为:{{num}}</h2>
  <button @click="addNum">增加数字</button>
  <hr>
  <component :is="sonView" :title="title" :name="name"  @change="addNum"></component>
</template>

<script setup>
import sonView from '@/components/sonView'
import {ref,reactive} from "vue";
const title = ref('这是父组件的标题')
const name = ref('小明')

const num = ref(2)
const addNum = ()=>{
  num.value++;
}
</script>

③跨组件传参

--父级组件中的代码

<template>
<h1>这是父组件</h1>
  <h2>Number的数字为:{{num}}</h2>
  <button @click="addNum">增加数字</button>
  <hr>
  <component :is="sonView" :title="title" :name="name"  :info="info" @change="addNum"></component>
  <hr>
  <component :is="grandsonView"  @change="addNum"></component>
</template>

<script setup>
import sonView from '@/components/sonView'
import grandsonView from '@/components/grandsonView'
import {ref,provide,reactive} from "vue";
const title = ref('这是父组件的标题')
const name = ref('小明')
/*provide语法,第一个参数是:key,第二个参数是:value*/
provide('name',name)
provide('info',{
  age:18,
  height:180,
  weight:122
})
const num = ref(2)
const addNum = ()=>{
  num.value++;
}
let info = reactive({
  age:18,
  height:180,
  weight:122
})
</script>

--儿子组件中的代码

<template>
<h1>这是子组件</h1>
  <h2>这是接收的父组件的数据:{{props}}</h2>
  <button @click="update">子组件修改父组件的数据</button>
  <h3>{{title}}</h3>
  <h3>{{name}}</h3>
  <h3>{{props}}</h3>
  年龄:<span>{{info.age}}</span>
  身高:<span>{{info.height}}</span>
  体重:<span>{{info.weight}}</span>
</template>

<script setup>
import {toRefs} from "vue";

const props = defineProps(['title','name','info'])
/*使用toRefs来进行数据的结构,不会破坏响应式数据*/
const {title,name,info} = toRefs(props)
/*使用defineEmits来进行接收传递过来的函数*/
let emits = defineEmits(['change'])
const update = ()=>{
  emits("change")
}
</script>

--孙子组件中的代码

<template>
<h1>这是孙子组件</h1>
  <button @click="update">孙子组件修改父级组件的数据</button>
  <h2>这是父级组件传递过来的参数:{{data}}</h2>
  <h2>这是父级组件传递过来的参数:{{info}}</h2>
  <h2>这是父级组件传递过来的参数:年龄:{{age}},身高:{{height}},体重:{{weight}}</h2>
</template>

<script setup>
import {inject,toRefs} from "vue";
const data = inject('name')
const info = inject('info')
const {age,height,weight} = toRefs(info)
const emits = defineEmits(['change'])
const update = ()=>{
  emits("change")
}
</script>