组件传值

app.vue:

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <h1 @click="str1Change">{{ str1 }}</h1>
  <h1 @click="objChange">{{ obj.name }}--{{ obj.age }}</h1>
  <h1>{{ str }}</h1>
  <hr>
  <comp-c></comp-c>
</template>
<script>
import CompC from './components/CompC.vue'
import { computed, reactive, ref, watch,provide } from "vue";
export default {
  name: "App",
  components:{
    CompC
  },
  setup() {
    let str1 = ref("我要谢谢你");
    let str2 = ref("因为有你");
    let obj = reactive({
      name:"张三",
      age:30
    })
    /* vue3中使用provide实现爷爷和孙子组件之间的通信 */
    // 提供数据 提供的数据名，数据值 
    provide('info',obj)
    
    /* vue3中计算属性的用法 */
    let str = computed(() => {
      return str1.value + str2.value;
    });

    function str1Change() {
      str1.value = "春天花会开";
    }

    function objChange(){
      obj.name = '李四'
    }
    /* vue3中实现对引用数据类型obj的监听 */
    // watch(obj,()=>{
    //   console.log('我被监听了')
    // })

    /* watch对对象里面单独的某一个属性进行监听的时候，需要使用箭头函数的方式 */
    watch(()=>obj.name,()=>{
      console.log('name被监听了')
    })

    /* 在vue3中使用watch监听器 监听基本数据类型 */
    /* watch的第三个参数使用{immediate:true} 可以实现一进入页面就立即监听 */
    // watch(str1, (newV, oldV) => {
    //   console.log("新值是：" + newV);
    //   console.log("旧值是：" + oldV);
    // },{immediate:true});

    


    return {
      str1,
      str2,
      str,
      obj,
      str1Change,
      objChange
    };
  },
};
</script>

CompB:

<template>
<!-- vue3 支持多个根元素 -->
  <h1 @click="changeZ">{{msg}}</h1>
</template>

<script>
export default {
  /* vue3这里也需要使用props接收数据 */
  props:['msg'],
  /* ★setup里面的this不指向vue实例 */
  setup(props,{emit}){
    /* 在setup里面使用props的数据，
    需要借助于setup方法第一个参数 */
    // console.log(props.msg)

    /* 在setup中子改父，
    需要借助于setup方法的第二个参数 */
    function changeZ(){
        emit('changezi','因为有你，温暖了四季')
    }
    
    return {
      changeZ,
    }
  }
}
</script>

CompC:

<template>
    {{c}}
</template>

<script>
import {inject} from 'vue'
export default {
    setup(){
        /* 在vue3中导入inject来实现爷爷和孙子之间通信，记得把值return出去 */
        const c = inject('info')
        return {
            c
        }
    }
}
</script>

vue3基本用法

组件传值