vue3.0组件之父传子，子传父,父传孙

父组件

<template>
<!-- <div>{{name}}</div>  
{{computedsx}}
{{sum}}

<button @click="changeFun">切换姓名</button>
<button @click="sum++">点击加!</button> -->
<!-- <div style="display:flex;width:200px;"> -->
  <!-- <span>{{salary}}</span> -->
  <!-- <span>{{age}}</span>
   <span>{{salary2}}</span>
   <span>{{shallowRefValue}}</span> -->
<!-- </div> -->
<son :value="parentValue" @handle="handle"  @handle2="handle2"></son>
</template>

<script>
import {defineComponent, ref,computed,watch,watchEffect,reactive,toRef,toRefs,shallowRef, provide} from 'vue'
import son from './components/son.vue'
export default defineComponent ({
  name:'app',
  components:{son},
  setup() {
    //定义变量
    let name=ref('张三')
    let age=ref(10)
    let sum=ref(0)
    let sumN=ref(1)
    let parentValue=ref('父传子')

   //子组件传来的值    
    const handle=value=>{
     parentValue.value=value;
      console.log('handle',value);
    }

    const handle2=value=>{
      console.log('handle2',value);
    }
     
    //子传孙子
    provide('geolocation', reactive({
      longitude: 90,
      latitude: 135
    }))




    let person=reactive({
     name1:'王五',
     age:11,
      job:{ j1:{ ss:'haha'} }
    })
    //方法改变
   function changeFun(){
        name.value='李四'
    }
   //计算属性
  let computedsx= computed(()=>{
    return name.value+age.value
   })
   //watch监听单个
   watch(sum,(newValue,oldValue)=>{
     console.log('watch监听',newValue+'--'+oldValue)
   },{immediate:true})
   //watch监听多个变量
   watch([sum,sumN],(newValue,oldValue)=>{
    console.log('watch监听sum-sumN',newValue,oldValue);
   })
   //另一种监听
   watchEffect(()=>{
    const s=sum.value
    console.log('sum改变',s);
   })
   //toref()  torefs() 直接暴露对象属性去访问 
   
   //1.相对于ref和reactive，shallowRef 和shallowReactive创建的数据是浅响应式的
    const shallowRefValue=shallowRef({b:1})
    shallowRefValue.value.b=2//视图不好更新

  
    return {
      name,
      changeFun,
      age,
      computedsx,
      sum,
      salary:toRef(person,'name1'),
      salary2:toRef(person.job.j1,'salary2'),
      ...toRefs(person),
      shallowRefValue,
      parentValue,
      handle,
      handle2
      
    }
  },
 })
</script>

子组件

<template>
    <div>{{value}}</div>
    <button @click="fn">子传父</button>
    <sun></sun>
</template>

<script>
import {defineComponent} from 'vue'
import sun from './sun.vue'
export default defineComponent({
    props: ['value'],
    components: {
      sun  
    },
    setup(props,context) {
        console.log(props.value);// 父组件传给子组件的值
        const fn=()=>{
         context.emit('handle','子组件传给父组件的值')
        context.emit('handle2','子组件给父组件传来值为handle2')
       }

      return{
        fn
       }
  
  
  },



})
</script>

孙组件

<template>
    <div>{{userGeolocation}}</div>
</template>

<script>
import { inject } from 'vue'
 export default{
    setup() {
        //获取爷爷的值
    const userGeolocation = inject('geolocation')
    
    return{
        userGeolocation
    }
       
    },
 }
</script>