Vue3初识

利用vite创建vue3项目

npm init vite-app projectName

安装依赖运行项目：

cd projectName

npm install

npm run dev

数据双向绑定必须要使用ref,reactive方法，基本数据类型用ref，引用数据类型用 reactive

import {ref,reactive} from 'vue'

let str2 = ref("走位走位");

    let obj=reactive({

        name:'zhangsan',

        age:30

    });

设置数据（方法）必须要声明再注册后才能使用

export default {

  name: "App",

  components:{CompB,CompC,CompD},

  setup() {

    let msg=ref('回首tao~');

     let obj={

        name:'zhangsan',

        age:30

    };

    provide('info',obj)

    function changef(v){

      msg.value=v;

      setTimeout(()=>{

        msg.value='欸嘿，走位~'

      },2000)

    }

    return{

      msg:msg,

      changef:changef,obj

    }

  },

};

父子传值

 父组件

 子组件props:['msg'],

和Vue2一样，但是要在setup里使用props的数据，需要借助于setup方法的第一个参数 

 setup(props）{

 console.log(props.msg);  }

子改父

子组件

{{msg}}

export default {

  name: "App",

  props:['msg'],

  /* ☆setup里面的this不指向vue实例 */

  setup(props,{emit}) {

      /* 在setup中子改父需要借助于setup方法的第二个参数emit */

      function changeMsg(){

          emit('changef','鬼刀一开，看不见~看不见~')

      }

      return{

          changeMsg:changeMsg

      }

  },

};

父组件 

function changef(v){

      msg.value=v;

      setTimeout(()=>{

        msg.value='欸嘿，走位~'

      },2000)

    }

    return{

      msg:msg,

      changef:changef,obj

    }

爷孙传值provide,inject

爷组件import {ref,provide} from 'vue'

let obj={

        name:'zhangsan',

        age:30

    };

    provide('info',obj)

孙组件

import {inject} from 'vue'

export default {

    setup(){

        const c=inject('info')

        return{

            c

        }

    }

}