您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

10vue组件 以及生命周期函数(scoped)

发布时间：2023-04-09 11:47:45编辑：雪饮阅读（）

组件化
上篇了解到了模块化，这里学习下组件化。
首先我们在src目录建立components\header.vue
如
<template>
    <div>
        <h2>这里是header组件</h2>
    </div>
</template>
 
这样就是一个简单的独立的header组件
接着我们修改App.vue来将这个header组件引入
<template>
  <div id="app">
    <h2>这是App组件</h2>
    <v-header></v-header>
  </div>
</template>
 
<script>
  import header from './components/header.vue';
    export default {    
      data () {
        return {}
      },
      components:{
        'v-header':header
      },
    }
</script>
 
总结其实就是：
1、引入组件
2、挂载组件
3、在模板中使用
scoped
如上面的组件化示例，如果在子组件header中给h2一个颜色，如
<template>
    <div>
        <h2>这里是header组件</h2>
    </div>
</template>
<style lang="scss">
h2{
    color:pink;
}
</style>
这样，则引用header组件的app组件中的h2也会变成粉色的文本，如果要样式仅仅在当前组件生效，则可以使用scoped关键字。如
<template>
    <div>
        <h2>这里是header组件</h2>
    </div>
</template>
<style lang="scss" scoped>
h2{
    color:pink;
}
</style>