19_Vue单文件组件

原创已于 2023-03-27 10:57:40 修改 · 73 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2023-03-27 10:50:27 首次发布

文章介绍了Vue的单文件组件命名规则，如使用kebab-case或PascalCase。接着，详细展示了.vue文件的模板、脚本和样式结构。在数据暴露方面，讨论了exportdefault和export的区别以及推荐的默认暴露方式。最后，简要提到了Vue项目中各文件的关系。

1.单文件组件命名方式

1个单词：school.vue 或 School.vue；

2个单词：my-school.vue 或 Myschool.vue。

最好用红色的写法。

2. .vue文件整体结构

<template>
  <div>
<!-- 组件的结构 -->
  </div>
</template>

<script>
// 组件交互相关的代码（数据、方法等）
</script>

<style>
/* 组件的样式 */
</style>

3.数据暴露方式

export 分别暴露；export {school} 统一暴露；export default school 默认暴露。

<script>
// 组件交互相关的代码（数据、方法等）
export const school = Vue.extend({ //分别暴露
data(){
  return{
    schoolName:'尚硅谷',
    address:'北京昌平'
}
},
methods: {
  showName(){
  alert(this.schoolName)
}
},
})
export{school} //统一暴露
export default school //默认暴露
</script>

一般使用export default school 默认暴露，并且可以优化代码（省略const school = Vue.extend）简写为以下形式：

<script>
export default{ 
name:'School',//加上组件名字，最好是组件文件命名一致
data(){
  return{
    schoolName:'尚硅谷',
    address:'北京昌平'
}
},
methods: {
  showName(){
  alert(this.schoolName)
}}}
</script>