利用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
}
},
};
父子传值
父组件 <CompB :msg="msg"/>
子组件props:['msg'],
和Vue2一样，但是要在setup里使用props的数据，需要借助于setup方法的第一个参数
setup(props）{
console.log(props.msg); }
子改父
子组件<h1 @click="changeMsg">{{msg}}</h1>
export default {
name: "App",
props:['msg'],
/* ☆setup里面的this不指向vue实例 */
setup(props,{emit}) {
/* 在setup中子改父需要借助于setup方法的第二个参数emit */
function changeMsg(){
emit('changef','鬼刀一开，看不见~看不见~')
}
return{
changeMsg:changeMsg
}
},
};
父组件 <CompB :msg="msg" @changef='changef'/>
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
}
}
}
