1. 组件化开发

**组件化开发 **指的是：根据 封装 的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护。

2. vue 中的组件化开发

vue 是一个支持组件化开发的前端框架

vue 中规定：组件的后缀名是 .vue 。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。

3. vue 三个组成部分

每个 .vue 组件都由 3 部分构成，分别是：

• tepmlate 组件的模板结构

  Component template should contain exactly one root element 组件结构中只能包含唯一一个根节点

  <template>
  <div class="text-box">
  <h3>这是用户自定义的 Test.vue {{ username }}</h3>
  </div>
  </template>
  

• script 组件的 Js 行为

  • export default 默认导出 固定写法
  • .vue 组件中的 data 不能指向对象 应该是个函数
  • 然后 return 出去一个用于定义数据的对象

  <script>
  // 默认导出 固定写法
  export default {
  // data 数据源
  data() {
  return {
  username: 'Pingting'
  }
  }
  }
  </script>
  

• style 组件的样式

  <style>
  .text-box{
  background-color: pink;
  }
  </style>
  

4. methods watch computed flters

• 在 组件中 this 是当前组件的实例对象

<script>
export default {
data() {
return {
username: 'Pingting'
}
},
methods: {
changeName() {
this.username = '娉婷'
}
},
//侦听器
watch: {},
//计算属性
computed: {},
//过滤器
filters: {}
}
</script>

5. 启用 less 语法

在 style 标签内加入 lang="less"

<style lang="less">
.text-box{
background-color: pink;
h3 {
color: blue;
}
}
</style>

6. 组件之间的父子关系

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

7. 使用组件的三个步骤

• 使用 import 语法导入需要的组件

  在当前组件的 script 区导入

  import Left from '@/components/Left.vue'
  

• 使用 components 节点注册组件

  export default {
  components: {
  'Left': Left
  }
  }
  

  键与值相同，可以简写

  components: {
  Left
  }
  

• 以标签的形式使用刚刚注册的组件

  <div class="box">
  <!-- 渲染 Left 和 Right 组件 -->
  <Left></Left>
  <Right></Right>
  </div>
  

8. 安装并配置@路径提示的插件

• 安装 插件 path Autocomplete

• 配置 插件：在 settings.json 加入下面的配置

• "path-autocomplete.extensionOnImport": true,
  "path-autocomplete.pathMappings":{
  "@":"${folder}/src"
  },
  

9. 私有子组件和全局组件

9.1 注册私有子组件

通过 components 注册的是私有子组件

例如：

• 在组件A的 components 节点下，注册了 组件F。
• 则组件 F 只能用在组件 A 中；不能被用在组件 C 中。

9.2 注册全局组件

在 vue 项目的 main.js 入口文件中，通过 Vue.component() 方法，可以注册全局组件。

import Count from '@/components/Count.vue'
Vue.component('yCount' , Count)

10. 组件的 props

10.1 概念

props 是组件的 自定义属性，在封装通用组件的时候，合理的使用 props 可以极大的提高组件的复用性！

10.2 使用

语法格式：

• props 中的数据可以直接在模板结构中被使用。
• props 是只读的，直接修改会报错。
• 要想要修改 props 的值，可以把 props 的值转存到 data 中。

export default {
// props 是自定义属性
props:['init1','init2',...]
}

之后可以在该标签上定义这些自定义属性的值：

<MyCount init="9"></MyCount>

• 此时是给init属性设置为"9"
• 当init绑定 v-bind （:）则是给属性赋值为双引号内的值 9
• :init="9"

10.2 props 是只读的

• props 是只读的，直接修改会报错。

• 要想要修改 props 的值，可以把 props 的值转存到 data 中。

• export default {
  // props 是自定义属性
  props:['init'],
  data(){
  return {
  count: this.init
  }
  }
  }
  

10.3 props 的默认值 default

在声明自定义属性时，可以通过 default 来定义属性的默认值。

// props 是自定义属性
props:{
init:{
default: 0
}
}

10.4 props 的 type 值类型

在声明自定义属性时，可以通过 type 来定义属性的值类型

props:{
init:{
default: 0,
type: Number
}
}

10.5 props 的 required 必填项

如果没有传 required 的自定义属性的值，则会报错

props:{
init:{
default: 0,
type: Number,
required: true
}
}

11. 组件之间样式冲突问题以及如何解决

11.1 样式冲突问题

默认情况下，写在 .vue 组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。

导致组件之间的样式冲突问题的根本原因：

• 单页面应用程序中，所有组件的 DOM 结构，都是基于唯一的 index.html 页面进行呈现的
• 每个组件中的样式，都会影响整个 index.html 页面中的 DOM 元素

11.2 如何解决

原生方法（底层原理）：

• 每个组件设置唯一的自定义属性

• style 样式使用属性选择器

• 使得样式只在该组件内有效

• <template>
  <div class="right-box" data-v-001>
  <span data-v-001>Right 组件</span>
  <MyCount data-v-001></MyCount>
  </div>
  </template>
  

• span[data-v-001]{
  color: blue;
  }
  

vue 中的快捷方法

在 style 标签内加上 scoped ，底层原理如上。

11.3 通过 deep 修改子组件中的样式

当使用第三方组件库的时候，如果有第三方组件默认样式的需求，需要用到 deep

• 如果在 scoped 的style内想要定义子组件的样式，则这样写：

• /deep/ h5{
  color: pink;
  }
  

• 会生成这样的选择器 [data-v-xxx] h5

• 如果不加上 /deep/ 则会生成 h5[data-v-xx]，但是子组件的标签上没有当前组件的自定义唯一属性，所以选择不到，样式无法生效。

最后

以上就是健壮蛋挞为你收集整理的Vue组件1. 组件化开发2. vue 中的组件化开发3. vue 三个组成部分4. methods watch computed flters5. 启用 less 语法6. 组件之间的父子关系7. 使用组件的三个步骤8. 安装并配置@路径提示的插件9. 私有子组件和全局组件10. 组件的 props11. 组件之间样式冲突问题以及如何解决的全部内容，希望文章能够帮你解决Vue组件1. 组件化开发2. vue 中的组件化开发3. vue 三个组成部分4. methods watch computed flters5. 启用 less 语法6. 组件之间的父子关系7. 使用组件的三个步骤8. 安装并配置@路径提示的插件9. 私有子组件和全局组件10. 组件的 props11. 组件之间样式冲突问题以及如何解决所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。