Vue-组件

组件知识点

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

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

---

三个组成部分

1.template

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

使用方法：

页面展示：

2.script

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

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

3.style

1.在 <style> 节点中编写样式美化当前组件的 UI 结构
2.<style> 标签上添加 lang=“less” 属性，即可使用 less 语法编写组件的样式

---

组件之间的父子关系

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

---

注册组件

全局组件

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

使用方法：

页面显示：

私有组件

1. 导入
   

2. 注册（注册名称的首字母建议大写，目的：方便和 html 元素做区分）
   

3. 使用（以标签形式使用）

页面显示：

---

组件的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>

页面显示效果：

我们还可以通过绑定属性的方法来传值
例如上面的例子，我们就可以在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>

页面效果：

关于‘’props是只读的‘’，解决：

页面显示效果：
虽然值也改变 但是我们的终端会提示我们props是只读的

关于这种情况的解决方法：
可以把props的值转存到data里面
props.vue中的内容

对象格式的props

假设规定一个属性值传过来的必须是数字的，我们就可以使用对象格式：
第一种写法：

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

props解决样式冲突

在style标签中加入scoped

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