网站建设可行性及需求分析,网站建设的基本步骤有哪些,网页打包app,wordpress 后台修改模板在vue3种setup的写法#xff0c;可以单独写setup()也可以写到script标签中#xff0c;当然我们推荐后面这种
他的好处有很多#xff0c;代码也简洁很多。1、属性和方法无需return#xff0c;可直接使用
/*原先*/
script
import { defineComponent } from v…在vue3种setup的写法可以单独写setup()也可以写到script标签中当然我们推荐后面这种
他的好处有很多代码也简洁很多。1、属性和方法无需return可直接使用
/*原先*/
script
import { defineComponent } from vue
export default defineComponent({name: app,setup(){ let abbb; return{a}}
})
/script
/*使用script-setup语法糖*/
script nameapp setuplet abbb;
/script
2、import组件自动注册无需写到components中
/*原先*/
template
about /
/template
script
import about from ./about.vue
import { defineComponent } from vue
export default defineComponent({
name: home,
components: { about }setup(){}
})
/script
/*用script-setup语法糖后*/
template
about /
/template
script
script setup
import about from ./about.vue
/script
//组件的引入使用已不再需要components注册才能使用了直接引入就可以在tamplate使用了,这个更改让代码看起来更舒服简介了一些
3、组件使用的变化props用法defineProps
//原来
props: {title: {type: String,default: ,required: true,},},
//使用script-setup后
import {defineProps} from vue
const props defineProps({title: {type: String,default: ,required: true,},
})
4.emit用法变化defineEmits
//原来
emit:[h-update,h-delete]//使用script setup后
import { defineEmits } from vue
const emit defineEmits([h-update, h-delete])
5.attrs和slot用法变化
//原来
setup(props,context){const { attrs, slots, emit } context// attrs 获取组件传递过来的属性值// slots 组件内的插槽
}//使用script setup后
import { useContext } from vue
const { slots, attrs } useContext()
6.组件对外暴露属性defineExpose
//子组件
template{{msg}}
/template
script setup
import { ref } from vue
let msg ref(Child Components);
// defineExpose无需导入直接使用
defineExpose({msg
});
/script
//父组件
templateChild refchild /
/template
script setup
import { ref, onMounted } from vue
import Child from ./components/Child.vue
let child ref(null);
onMounted(() {console.log(child.value.msg); // Child Components
})
/script
7.使用自定义指令
全局注册的自定义指令将以符合预期的方式工作且本地注册的指令可以直接在模板中使用就像上文所提及的组件一样。
但这里有一个需要注意的限制必须以 vNameOfDirective 的形式来命名本地自定义指令以使得它们可以直接在模板中使用
script setup
const vMyDirective {beforeMount: (el) {// 在元素上做些操作}
}
/script
templateh1 v-my-directiveThis is a Heading/h1
/template
script setup// 导入的指令同样能够工作并且能够通过重命名来使其符合命名规范import { myDirective as vMyDirective } from ./MyDirective.js
/script
导入指令
script setupimport { directive as clickOutside } from v-click-outside
/scripttemplatediv v-click-outside /
/template
