Vue笔记(3)-组件

1. 组件的基本使用

1.1 组件的三个组成

项目中所有以 .vue 结尾的文件，都是一个组件。

组件的三个组成部分:

        template  组件的模板结构

        script  组件的JS代码

        style 组件的样式

<template>
  <div>
    <h3 class="hello-text">{{ hello }}</h3>
  </div>
</template>

<script>
  // 默认导出，这是固定写法
  export default {
    name: 'App',
    // 组件中的data不能指向对象，必须是一个函数,返回数据对象
    data(){
      return {
        hello:'hello component'
      }
    }
  }
</script>

<style>
  .hello-text{
    color: #C00;
  }
</style>

1.2 定义methods

<template>
  <div>
    <h3 class="hello-text">{{ hello }}</h3>
    <h1 @click="changeHelloText">点我有惊喜</h1>
  </div>
</template>

<script>
  // 默认导出，这是固定写法
  export default {
    name: 'App',
    // 组件中的data不能指向对象，必须是一个函数,返回数据对象
    data(){
      return {
        hello:'hello component'
      }
    },
    methods:{
      /**
       * 修改hello的值
       */
      changeHelloText(){
        // vue组件中,this是当前组件的实例
        this.hello = 'HELLO MOTHER F****';
      }
    }
  }
</script>

1.3 使用组件

1.3.1 新建组件

首先在 components 文件夹下新建一个vue文件。

// 新建一个 welcome.vue 文件(在components文件夹)
<template>
  <div>
    <h1 class="text">welcome {{ username }}</h1>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data(){
      return {
        username:'Admin'
      }
    }
  }
</script>

<style>
    .text{
        text-align: center;
        color: #C00;
    }
</style>

1.3.2 在App.vue中使用

使用组件的三个步骤：引入组件、注册组件、使用组件

<template>
  <div>
    <!-- 3.使用组件 -->
    <welcome></welcome>
  </div>
</template>

<script>
  // 1.引入组件
  import welcome from '@/components/welcome.vue';

  export default {
    name: 'App',
    // 2.注册组件，所有组件都在components中注册
    components:{
      'welcome': welcome
      // 可以简写为
      welcome
    }
  }
</script>

@ 指向了src目录，所以 @/ 就等于 /src/

1.4 注册全局组件

推荐VSCODE组件: vuter,安装之后新建组件时只需要输入 < 就可以自动填充基本结构

在main.js中先引入组件，然后使用 Vue.component(名称,组件); 注册。  组件名称决定了使用时的标签名。

import content from '@/components/pagecontent.vue';

// 注册全局组件。 注册名称,组件对象
Vue.component('myContent',pagecontent);


// 使用
<myContent></myContent>

2.props

2.1 props基本使用

<template>
  <div>
    <h1 class="text">welcome {{ username }}</h1>
  </div>
</template>

<script>
  export default {
    name: 'App',
    props:['username']
  }
</script>

<welcome username="CalenLi"></welcome>

2.2 使用v-bind赋值

<template>
  <div>
    <h5>当前值: {{ init }}</h5>
    <h5 @click="count += 1">让值+1</h5>
  </div>
</template>

<script>
export default {
    name:'pagecontent',
    props:['init'],
    data(){
        return {
            count:0
        }
    }
}
</script>



<!-- 使用 -->
<myContent :init="9"></myContent>

2.3 props是只读的

Vue并不建议组件直接修改props里的值。实际上是可以修改的，但并不建议去修改。

<template>
  <div>
    <h5>当前值: {{ count }}</h5>
    <h5 @click="count += 1">让值+1</h5>
  </div>
</template>

<script>
export default {
    name:'pagecontent',
    props:['init'],
    data(){
        return {
            count: this.init
        }
    }
}
</script>

2.4 default、type

<script>
export default {
    props:{
      init:{
        type:Number,
        default:0
      }
    },
    data(){
        return {
            count: this.init
        }
    }
}
</script>

default 设置默认值。  type指定该属性的类型。

2.5 required 必填

<script>
export default {
    props:{
      init:{
        type:Number,
        required:true                    //该属性必须传递值
      }
    },
    data(){
        return {
            count: this.init
        }
    }
}
</script>

3. 样式的一些问题

3.1 样式冲突

写在 .vue 里的样式默认全局生效，这样会造成样式冲突问题。 所以我们应该在 <style>中添加 scoped属性，让样式只在当前组件生效

原因：vue是单页面应用，每个组件都是放在 index.html 中的，样式会影响整个html。

scoped的原理：他会给当前组件里的所有DOM都加一个自定义属性 v-data-*** 然后再css选择器上加上属性选择器 (.text[v-data-***]) 这样就只对当前组件里的DOM生效了。

 

3.2  /deep/

当父组件指定了 scoped 时又想修改子组件的样式，就需要使用 /deep/ 来写样式

<style lang="less" scoped>
  /deep/ h5{                // 最终选择器写法: [v-data-***] h5
    margin:3px 0px;
  }
</style>

当使用第三方组件库的时候，想修改组件的样式可以使用 /deep/ 来修改