vue基础3-组件

vue基础3-组件

• 组件
• 动态组件
• 插槽
• 自定义指令

组件

什么是项目的组件化开发？

根据封装的思想，把页面上可复用的UI结构封装成组件，方便项目的开发与维护；

Vue 中规定：组件的后缀名为.vue;

1、组件的三个 组成部分

• template
• script
• style

<template>
  <div class="hello">
    <h1>{
  { msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
      return {
          msg:'hello'
      }
  }
}
</script>


<style scoped lang="less">
h1 {
  margin: 40px 0 0;
}
</style>

【注意】

• 组件中data数据源不能是一个对象，必选是一个函数；
• return{}一个对象，数据都在{}里面
• 在组件中，this指向组件实例；
• 组件的模版结构中，只能有一个根节点；template中必须只有一个根元素包裹内容；

原因是：

• a 组件中data如果是一个对象，a组件在复用时，其他组件在修改数据时，那么用了a组件的其它组件都会改变；会造成数据混乱；
• a 组件中data如果是一个函数，组件会有自己独立的数据源空间，不会受其他组件数据的影响；

【less】
如何启用 less 语法？

<style scoped lang="less">
</style>

• 当在 style 标签中定义了 lang=“less”,就可以使用less语法了；
• 当在 style 标签中定义了 scoped 时，style 标签中的所有属性就只作用于当前组件的样式，实现组件样式私有化，从而也就不会造成样式全局污染

2、使用组件的三个步骤

组件之间的父子关系：

• 组件在被封装好之后，彼此之间是相互独立的，不存在父子关系；
• 在使用组件时，根据彼此的嵌套关系，才有了父子关系，兄弟关系；

定义 Left.vue,Right.vue,app.vue三个组件；
需求 把left.vue组件放到app.vue组件中；

使用组件的三个步骤：

• 导入 import Left from ‘Left.vue’;
• 注册 使用components节点注册
• 使用 在模版语法中，以标签形式使用刚才注册的组件；

1、导入

 import Left from