vue 组件

Vue 组件

1.组件介绍及定义组件

• 每一个 .vue 文件 都是一个 vue 组件
• 包括三部分
  • template -> html 模版
  • script -> js 行为
  • style -> css/less(需要指定lang=less) 样式

一个 vue 组件：

// 1.模版
<template>
    <div id="app">
        <h1>this is my {{ username }} page</h1>
    </div>
</template>

// 2.行为
<script>
    // 因为 次组件被直接使用 在的 root 节点上，故也被称为跟组件
    export default {
        name: "Myapp",
        data() {
            // 组件中的 data 应该是 一个 data: funtion(){} , 简写方式

            return {
                username: "my app",
            }; // 返回的是一个 对象
        },
        methods: {
            changeName() {
                this.username = "u app";
            },
        },
        filters: {},
        computed: {
            uppername() {
                return this.username.toUpperCase();
            },
        },
        watch: {},
    };
</script>

// 3. 样式
<style lang="less">
    div {
        background-color: aquamarine;
        h1 {
            color: beige;
        }
    }
</style>

为什么 这里的 data 不是一个对象而是一个函数？

参考：https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function

参考：https://www.yebaike.com/14/202104/3013094.html

参考：https://blog.csdn.net/qq_37140632/article/details/85270608

简单来说，因为组件需要被不同的场景所复用，所以不能使用引用类型（即对象object），当 data 为一个对象时，任意使用此组件的地方的操作都会对其它部分造成影响。使用函数的形式是为了内存隔离，数据安全，因为创建一个组件就是创建了一个对象，而函数则是开辟了一块新的内存，达到了内存隔离的目的。

2.组件使用

组件的使用分为三个过程：

1. 导入组件
2. 注册组件
3. 使用组件

<template>
	<div id="app">
	  <!-- 3. 使用组件 -->
	  <SelfDefinedComponent/>
	</div>
</template>

<script>
  // 1. 导入组件
  import SelfDefinedComponent from "path/to/component"
  export default {
    .....
    ,
    components: {  // 2. 注册组件
       SelfDefinedComponent,  //组件也是对象，可以简写
    }
  }
</script>

<style>
  ...
</style>

这里请注意 2 注册组件的部分。

通常情况下在对象里边应该是以 key: value的方式, 组件对象也是一样的。但是可以简写成上述的样子，解释一下变化过程：

首先需要明确两点：

• 导入的组件是一个对象
• 对象作为另一个对象的 value 的时候可以简写

一个简单的 js 基础知识

a = {ta: 1}
// {a: 1}
b = {a,}   // 等价于 b = {a: a,}
/* 
{
	a: {ta: 1}
}
*/

1. 最开始的样子， key 是我们自定义
components: {  
   "RegSelfDefinedComponent": SelfDefinedComponent,
}
// 因为 js 中对象的 key 可以不使用 "引号" 包裹

2. 变化成 js 对象的写法
components: {  
   RegSelfDefinedComponent: SelfDefinedComponent,
}

3. 通常情况下为了一致性，我们会将 key 和 value 写成一样的，为了方便查找和识别。
components: {  
   SelfDefinedComponent: SelfDefinedComponent,
}
   
4. 简写方式，当 key 和 value 一样的时候可以直接省略简写
components: {  
   SelfDefinedComponent,
}

当最导入的组件重命名的时候：

注意两点:

• 在注册组件的时候给定一个自定义的 key
• 在组件使用的时候要和这个 key 一致，为不是我们导入的组件名称。

<template>
	<div id="app">
	  <!-- * 注意点2 -->
	  <RegSelfDefinedComponent/>
	</div>
</template>

<script>
  import SelfDefinedComponent from "path/to/component"
  export default {
    .....
    ,
    components: {  
       RegSelfDefinedComponent: SelfDefinedComponent,  // * 注意点1
    }
  }
</script>

<style>
  ...
</style>

私有组件

我们写的每一个 .vue 文件都是一个组件，被注册到某一个组件中之后(通过 components 注册)，才能在目标组件中使用。这个组件被称为目标组件的私有组件。其它组件没有注册，故其它组件中是不能使用这个组件的。

全局组件

1. import ...

2. register
Vue.component('MyCount', Count)

3. any where in use 
<MyCount/>

3.props 属性

props 是自定义属性，允许使用者通过自定义属性传递 “信息”

在封装组件时，合理地使用 props 可以提高组件复用性。

<script>
  export default {
    props: ['自定义属性1', '自定义属性2'],  // 定义自定义属性
    data():{}
  }
</script>

props 中的数据，可以直接在模板结构中使用

<template>
  <div class="left-container">
    <h3>使用 props 中某个属性的值 {{ ppppp }}</h3>
  </div>
</template>

<script>
  export default {
    props: ['ppppp', '自定义属性2'],  // 定义自定义属性
    data():{}
  }
</script>

使用

// 某个组件中使用
<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    <!-- 使用局组件 -->
    <MyCount init="6"/>    <!-- 自定义属性  init -->
  </div>
</template>

v-bind 绑定属性使用场景

在传递值的时候是字符串 “6”

<MyCount init="6"/> 

在传递值的时候就是数字 6

<MyCount v-bind:init="6"/> 
或者简写方式
<MyCount v-bind:init="6"/>   会被解释成 js 绑定属性

props 是"只读"的

vue 规定：在组件封装中的自定义属性是只读的，开发者不能直接修改 props 值。否则终端会报错。

// 解决方式
<script>
    export default {
        props:['init',],  // 自定义属性
        //  props 自定义属性可以通过 this 访问到
        data(){
            return {count: this.init}  // ** 将 props 中的值 转存到 data 中
        },
        methods:{
            add(){
                this.count += 1
            }
        }
    };
</script>

props 自定义属性的 default

<script>
    export default {
        props:{
          // 自定义属性: { 配置选项 }
            init: {
                default: 0, // 若外界使用组件的时候，没有传递 init，则 default 值生效。
            },
        },  // 自定义属性
    }
</script>

两种定义 props 属性的方式

1. 数组方式
props: ['自定义属性1', '自定义属性2']

2. 对象方式
props: {
    props:{
       // 自定义属性: {配置选项}
    }
}

1. 数组方式定义props，在调用自定义属性的时候，如果没有传递自定义属性值，则为 undefined。
2. 对方方式定义 props，就无需顾虑传递与否，没有传递默认值，就可以使用 props 自定义属性的 default 配置选项，取默认值作为属性值使用。

props 的值的类型 type

props: {
    props:{
       // 自定义属性: {配置选项}
       init: {
           default: 9,
           type: Number // init 值必须为 Number 类型。
                 // Array  Object String Boolean...
       }
    }
}

如果传入的值不是 Number 类型，控制台会报错

props 的必须要传递的值 required

如果 带有 required 的 props 属性，在使用组件的时候必须传递，否则会直接报错

props: {
    props:{
       // 自定义属性: {配置选项}
       init: {
           default: 9,
           type: Number, // init 值必须为 Number 类型。
                 // Array  Object String Boolean...
           required: true   // 必须传递项校验, 有默认值 default 也会忽略。
       }
    }
}