vue3的一些内容

因为用了vite，所以也需要使用一下vue3的一些新特性

一、setup
1.什么是setup语法糖
起初 Vue3.0 暴露变量必须 return 出来，template中才能使用；

现在只需在script标签中添加setup，组件只需引入不用注册，属性和方法也不用返回，也不用写setup函数，也不用写export default ，甚至是自定义指令也可以在我们的template中自动获得。

// 像在平常的setup中一样的写,但是不需要返回任何变量
const num= ref(0) //在此处定义的 num 可以直接使用
const addNum= () => { //函数也可以直接引用,不用在return中返回

num.value++

}

复制代码
2.使用setup组件自动注册
在 script setup 中，引入的组件可以直接使用，无需再通过components进行注册，并且无法指定当前组件的名字，它会自动以文件名为主，也就是不用再写name属性了。示例：

<zi-hello></zi-hello>

复制代码
3.使用setup后新增API
因为没有了setup函数，那么props，emit怎么获取呢

setup script语法糖提供了新的API来供我们使用

3.1 defineProps
用来接收父组件传来的 props。示例:

父组件代码

import {ref} from 'vue'
let name = ref('赵小磊========')

复制代码
子组件代码

defineProps({
name:{

 type:String,
 default:'我是默认值'

}
})

复制代码

3.2 defineEmits
子组件向父组件事件传递。示例:

子组件

//自定义函数，父组件可以触发
const em=defineEmits(['updata'])
const ziupdata=()=>{

em("updata",'我是子组件的值')

}

复制代码
父组件

const updata = (data) => {

console.log(data); //我是子组件的值

}

复制代码
3.3 defineExpose
组件暴露出自己的属性，在父组件中可以拿到。示例:

子组件

name:'赵小磊'

})
//暴露出去的变量
defineExpose({

ziage,
ziname

})

复制代码
父组件

const isclick = () => {

console.log('接收ref暴漏出来的值',zihello.value.ziage)
console.log('接收reactive暴漏出来的值',zihello.value.ziname.name)

}

复制代码
父组件拿到的结果

此篇文章转发于：https://www.jb51.net/article/231485.htm

作者: Bill 本文地址: http://biaoblog.cn/info?id=1641280510368

版权声明: 本文为原创文章，版权归 biaoblog 个人博客 所有，欢迎分享本文，转载请保留出处，谢谢！