vue3 新实验属性 script setup <script setup>
vue3在单文件组件中引入了一种新的脚本类型示例<script setup>import { ref } from 'vue'// 像在平常的setup中code// 但是不需要返回任何变量const count = ref(0)//在此处定义的count可以直接在模板html中引用const inc = () => {//函数也可以直接引用,而不用返回count.value++
·
vue3在单文件组件中引入了一种新的脚本类型
示例
<script setup>
import { ref } from 'vue'
// 像在平常的setup中code
// 但是不需要返回任何变量
const count = ref(0)//在此处定义的count可以直接在模板html中引用
const inc = () => {//函数也可以直接引用,而不用返回
count.value++
}
</script>
<template>
<Foo :count="count" @click="inc" />
</template>
在setup中引入的组件可以直接使用
<script setup>
import Foo from './Foo.vue'
import MyComponent from './MyComponent.vue'
</script>
<template>
<Foo />
<!-- kebab-case also works -->
<my-component />
</template>
兼容props,emit,context
import { defineProps, defineEmit, useContext } from 'vue'
const props = defineProps({
foo: String,
})
const emit = defineEmit(['change', 'delete'])
const { slots, attrs } = useContext()
更多推荐
已为社区贡献7条内容
所有评论(0)