vue单页面组件

最新推荐文章于 2022-09-08 11:23:26 发布

great_t

最新推荐文章于 2022-09-08 11:23:26 发布

阅读量1.1k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/great_t/article/details/115638608

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文探讨了在Vue.js中使用单页面组件如何避免内联样式和代码编辑不便的问题。通过详细介绍单页面组件的构成，包括HTML结构、SCSS样式和组件导入，以及其利用模块化编程解决CSS和预处理器限制的方式，帮助开发者实现更高效、更易维护的开发体验。

摘要由CSDN通过智能技术生成

我们通常使用在js文件里通过vue.component(’’,{})方式，或者在某个组件里定义局部组件的时候，有以下一些弊端：
1.不支持css样式编写，需要写内联样式
2.在字符串模板中templete：这里编写html代码 没有高亮显示，代码提示等，开发及其不方便
3.限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器，如Babel
为了解决上述问题，引进了vue单页面组件，可完美避免上述问题。

单页面组件构成

页面

<!-- 这里编写页面结构html，注意：template下必须有且只有一个dom节点 -->
<template>
  <div>
    <!-- 正常html结构 -->
    <input type="text" v-model="mytext">
    <!-- 引入别的组件 -->
    <navbar title="首页"  :right="false" @event="handleEvent"></navbar>
  </div>
</template>

<script>
/**导入别的组件， 这里只是把navbar组件的代码导过来，并不算定义navbar组件**/
import navbar from './components/Navbar'
// Vue.component('navbar',navbar);  全局定义navbar组件
// es6导出当前组件
export default {
  data () {
    return {
      mytext: '',
      datalist: []
    }
  },
  components: {
    // 局部定义navbar组件
    navbar
  },
  methods: {
  }
}
</script>

scss

<style scoped lang="scss">
  $width:300px;
   ul{
     li{
        width: $width;
        background-color: yellow;
      }
   }
</style>

附录：navbar单组件代码

<template>
    <div>
        <button @click="handleClick">left</button>
        <span>{{title}}</span>
        <button v-show="right">right</button>
    </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: 'navbar'
    },
    right: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {

    }
  },
  methods: {
    handleClick () {
      this.$emit('event', 1000000)
    }
  }
}
</script>