组件知识点

什么是组件化开发: 据封装的思想,把页面上可重用的 UI 结构封装为组件,从而方便项目的开发和维护。.vue文件就是Vue组件
vue 组件的三个组成部分

  • template -> 组件的模板结构(必写)
  • script -> 组件的 JavaScript 行为(可选)
  • style -> 组件的样式(可选)

三个组成部分

1.template

注意:
1.template 是 vue 提供的容器标签,只起到包裹性质的作用,它不会被渲染为真正的 DOM 元素
2.template 中只能包含唯一的根节点

使用方法:

vue 制作组织架构图 vue组件的基本结构_node.js

页面展示:

vue 制作组织架构图 vue组件的基本结构_封装_02

2.script

在默认导出的对象中,声明组件的data,methods,computed,filters

vue 制作组织架构图 vue组件的基本结构_封装_03

为什么data必须是一个函数?
一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝:如果使用数据对象的方式,会导致多个组件实例共用同一份数据的问题

3.style

1.在 <style> 节点中编写样式美化当前组件的 UI 结构

2.<style> 标签上添加 lang=“less” 属性,即可使用 less 语法编写组件的样式

vue 制作组织架构图 vue组件的基本结构_vue 制作组织架构图_04


组件之间的父子关系

1.组件在被封装好之后,彼此之间是相互独立的,不存在父子关系
2.在使用组件的时候,根据彼此的嵌套关系,形成了父子关系、兄弟关系


注册组件

全局组件
  1. 在main.js中注册全局组件
  2. 导入需要全局注册的组件
  3. 使用Vue.component(‘注册名’,‘要注册的组件’)

使用方法:

vue 制作组织架构图 vue组件的基本结构_node.js_05


页面显示:

vue 制作组织架构图 vue组件的基本结构_封装_06

私有组件
  1. 导入
  2. vue 制作组织架构图 vue组件的基本结构_封装_07

  3. 注册(注册名称的首字母建议大写,目的:方便和 html 元素做区分)
  4. vue 制作组织架构图 vue组件的基本结构_node.js_08

  5. 使用(以标签形式使用)

vue 制作组织架构图 vue组件的基本结构_npm_09


页面显示:

vue 制作组织架构图 vue组件的基本结构_封装_10


组件的props

props 是组件的自定义属性,在封装通用组件的时候,合理地使用 props 可以极大的提高组件的复用性。
(简单来说:封装.vue组件的时候,只封装组件的UI结构和style样式,组件中的数据,尽量让使用者动态提供)

注意:
1.props是只读的
2.props中default定义属性的默认值
3.props的type来定义属性的值类型
4.require是将属性设置为必填项,强制用户必须传递属性的值

使用方法:
将props.vue中的内容渲染到Left.vue中

props.vue中的内容

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
//用porps 将页面结构与样式传给left.vue中,但是值在left.vue中给出
  props: ['title']
}
</script>

<style></style>

left.vue中的内容

<template>
  <div class="left-container">
    <h3>Left</h3>
    //私有组件的使用
    //用title动态传参
    <Article title="props.vue的内容"></Article>
  </div>
</template>

<script>
//私有组件的导入
import Article from '@/components/props.vue'
export default {
//私有组件的引用
  components: {
    Article
  }
}
</script>
<style></style>

页面显示效果:

vue 制作组织架构图 vue组件的基本结构_node.js_11


我们还可以通过绑定属性的方法来传值

例如上面的例子,我们就可以在left,vue中,通过data()给定title的值

<template>
  <div class="left-container">
    <h3>Left</h3>
    //绑定属性要加 :
    <Article :title="leftTitle"></Article>
  </div>
</template>

<script>
import Article from '@/components/props.vue'
export default {
  data() {
    return { leftTitle: '通过绑定属性得到的title值' }
  },
  components: {
    Article
  }
}
</script>

<style></style>

页面效果:

vue 制作组织架构图 vue组件的基本结构_vue 制作组织架构图_12

关于‘’props是只读的‘’,解决:

vue 制作组织架构图 vue组件的基本结构_npm_13


页面显示效果:

虽然值也改变 但是我们的终端会提示我们props是只读的

vue 制作组织架构图 vue组件的基本结构_npm_14

关于这种情况的解决方法:

可以把props的值转存到data里面

props.vue中的内容

vue 制作组织架构图 vue组件的基本结构_node.js_15

对象格式的props

假设规定一个属性值传过来的必须是数字的,我们就可以使用对象格式:

第一种写法:

vue 制作组织架构图 vue组件的基本结构_vue.js_16


第二种写法:如果除了指定数据类型之外,还要指定其他,就要使用这种方式

vue 制作组织架构图 vue组件的基本结构_node.js_17

vue 制作组织架构图 vue组件的基本结构_npm_18

props解决样式冲突

在style标签中加入scoped

vue 制作组织架构图 vue组件的基本结构_npm_19

在父组件中写样式去美化子组件的元素,此时是不生效的,要在样式之前加上/deep/

vue 制作组织架构图 vue组件的基本结构_封装_20