Vue组件 —— 单文件组件

news2025/1/16 21:46:32

追溯vue组件问题

在未讲项目之前，在这一篇内容当中就讲到了组件引入使用，有内置的组件和动态组件以及封装一个swiper组件，组件也分为全局组件和局部组件，在讲在项目当中去使用组件之前先简单的回顾一下组件的编写：

<div id="app">
    <hello></hello>
</div>
<script>
    // 组件 
    Vue.component("hello",{
        template:`
        <div>
            <button @click="handleHello">打招呼</button>    
        </div>
        `,
        methods:{
            handleHello(){
                alert("你好呀！");
            }
        }
    })

    new Vue({
        el:'#app'
    })
</script>

在之前讲到 vue 组件的时候，将其封装成组件的时候很方便使用，但是在编写template模板的时候存在很多的问题，下面就将在前面未解决的问题在本篇内容当中来进一步的学习：

1. 组件起名称：js(script)中编写驼峰式，则html需要用连接符 -
2. 组件中编写DOM结构时：没有代码的高亮显示（解决：通过vue单文件组件解决）
3. 组件中编写DOM时用到css：只能写行内样式（解决：通过vue单文件组件解决）
4. template(模板)：包含一个根节点（ps：将内容包裹起来）
5. 组件是孤岛，无法（直接）访问外边其他组件的状态或者方式（解决：间接的组件通信）
6. 自定义组件data必须是一个函数
7. 所有的组件写在同一个页面，代码很乱（解决：通过vue单文件组件解决）
 
补充：
    刚接触组件编写template模板中DOM结构会发现没有代码的提示,完全需要自己手敲，虽然用起来好用,但觉得不方便，这个在后面做项目的时候是通过vue单文件组件可以解决的，所以这些问题都在后续有其他的变化；
    使用组件可以进行引入使用,也使得组件像一座孤岛,那么组件与组件之间不能直接访问状态和方法，那么就需要通过组件与组件之间间接通信完成；
    可以回顾以上代码编写下来,script中编写的组件代码(Vue.component)内容还是蛮多的,如果还有其他的,那么这些代码和new Vue()中的代码混合会使整体代码很混乱,虽然解决了代码的耦合,但这些问题都能够得以解决；

以上的这些问题就是先前我们编写组件的方式存在的问题，那么现在在项目当中，也是本篇目中最重要的内容就是Vue的单文件组件，接下来就是开始对Vue单文件组件内容的学习！

vue单文件组件

通过简单的回顾了单文件组件的内容已经有了一个大概的了解，使用 Vue.components 来去定义组件，那么 vue单文件组件就是一个vue文件就是一个组件的形式，那么在存放组件的文件夹components中定义一个组件名为SayHello的组件；即 /components/SayHello.vue ；

<!-- SayHello组件 -->

<template>
    <div>
        <button @click="handleHello">打招呼</button>
    </div>
</template>

<script>
export default {
  methods: {
    handleHello () {
      alert('你好呀!')
    }
  }
}
</script>

在使用的时候，只要将其引入在对应的 .vue 文件当中即可；在App.vue文件当中引入使用；

全局组件编写

<!-- App.vue -->

<template>
  <div id="app">
    <sHello></sHello>
  </div>
</template>

<script>
import hello from './components/SayHello.vue'
import Vue from 'vue'
// 全局注册
Vue.component('sHello', hello)

export default { }
</script>

局部组件编写

<template>
  <div id="app">
    <sHello></sHello>
  </div>
</template>

<script>
import hello from './components/SayHello.vue'

export default {
  // 局部注册
  components: {
    sHello
  }
}
</script>

然后将项目进行运行起来，如是同上一篇来的可使用【npm run start】或【npm start】，如是自己创建的项目未修改则使用【npm run serve】运行；

在浏览器中中访问地址 http://localhost:8080访问查看：可以看到刚刚编写的SayHello组件也可以正常使用成功了；

可以知道我们刚在编写这个组件的时候同样是在template标签当中，同时该标签中仅能存在一个div，这个vue单文件组件解决了在之前通过Vue.components(...)中存在的一些问题，如template中代码的编写没有高亮提示，编写起来不方便等的一些问题。

样式冲突 —— scoped

在之前的内容中还存在什么问题呢？template模板中的组件编写DOM时只能用内联的css样式，现在通过单文件组件可以解决这个问题，那么仍存在这样一个问题，组件的引入使用中CSS样式是否会发生冲突呢？下面来简单的测试一下：

在App.vue文件中去编写按钮样式style :

<!-- App.vue -->
...
<style>
  button {
    background: yellow;
  }
</style>

<!-- SayHello -->
...
<style>
  button {
    background: green;
  }
</style>

现在来测试运行之后，观察组件中的 <按钮> 是否会与App.vue中的组件样式发生冲突：

在 <head> 标签中的 <style> 标签可以看到 button 样式 background 有 green 和 yellow 两种，那么仅有App.vue中的样式得以体现；如何解决呢？

1）通过添加id选择器；

为 SayHello.vue template模板中div标签添加id选择器，在样式前添加选择器：

<template>
    <div id="lhxz-button">
        ...
    </div>
</template>
<script>...</script>
<style>
    #lhxz-button button{
        background: green;
    }
</style>

现在可以看到的是可以通过选择添加id选择器的方式，那么接下来讲一种关于vue提高的另外一种解决方案；

2）scoped

可以不需要添加任何id选择，只需要在style标签种添加这样一个属性 —— scoped即可，添加这个属性后这这style的标签仅作用于当前这个组件；

<style scoped>
    ...
</style>

以上就是本篇目的全部内容，了解之前组件引入使用中留下问题的解决之法，一个vue单文件就是一个组件，以及单文件组件所带来的样式冲突问题，vue也同样提供了这样一套解决方案，在style标签当中使用scoped属性；本期内容就到此结束，感谢大家的支持！一键三连哦！

单页面 / 多页面

	单页面应用【SPA】	多页面应用【MPA】
组成	一个外壳页面和多个页面片段组成	多个完整页面构成
资源（css/js）共用	共用，只需要在外壳部分加载	不共用，每个页面都需要加载
刷新方式	局部刷新或更改	全局刷新
url模式	xxx.com/#/one xxx.com/#/two	xxx.com/one.html xxx.com/two.html
用户体验	切换快，用户体验好	切换加载慢，流程度不够，体验差
转场动画	容易实现	无法实现
数据传递	容易	依赖url传参、或cookie/localStorage等
搜索引擎优化（SEO）	需要单独方案，实现较为困难，不利于SEO检索，可利用服务器端渲染（SSR）优化	实现方法简易
试用范围	高要求的体验度、追求界面流程的应用	适用于追求高度支持搜索引擎的应用
开发成本	较高，常需借助专业的框架	较低，但页面重复代码多
维护成本	相对容易	相对复杂