[JavaScript知识库] Vue-组件开发(上)

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue-组件开发(上) -> 正文阅读

[JavaScript知识库]Vue-组件开发(上)

Vue-组件开发(上)

文章目录

- Vue-组件开发(上)

1.什么是组件化开发

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

2.Vue中的组件化开发

组件就是对UI结构的复用
vue是一个支持组件化开发的前端框架
vue中规定:组件的后缀名为 .vue 在我们通过Vue-cli创建的项目里面，有一个App.vue文件，该文件的本质上就是一个Vue的组件。

3.Vue组件的三个组成部分

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

template -> 组件的模板结构
script -> 组件的JavaScript行为
style -> 组件的样式

<template>
  <div class="box">
      <h3>{{username}}</h3>
  </div>  
</template>
<script>
//默认导出 固定写法
export default{
    //data 数据源
    //组件里面的data不能指向对象
    //组件中的data必须是一个函数
    data(){
        //这个return 出去的 { } 中，可以定义数据
        return {
            username:'zh'
        }
    }
}
</script>
<style>
    .box{
        background-color: aquamarine;
    }
</style>

在这里插入图片描述

3.1在组件中定义methods方法

methods方法的定义与在html文件里面定义的一样，与data方法

<template>
  <div class="box">
      <h3>{{username}}</h3>
      <button @click="btn">点击修改</button>
  </div>  
</template>
<script>
//默认导出 固定写法
export default{
    //data 数据源
    //组件里面的data不能指向对象
    //组件中的data必须是一个函数
    data(){
        //这个return 出去的 { } 中，可以定义数据
        return {
            username:'zh'
        }
    },
    methods: {
        btn(){
            //在组件中this就表示当前组件的实例对象
            this.username='zhanghan'
            console.log(this);
        }
    },
}
</script>
<style>
    .box{
        background-color: aquamarine;
    }
</style>

3.2 在Vue组件中启用less语法

如果在组件里面对样式的修改需要用到less语法，只需要在

<template>
  <div class="box">
      <h3>{{username}}</h3>
      <button @click="btn">点击修改</button>
  </div>  
</template>

<script>
//默认导出 固定写法
export default{
    //data 数据源
    //组件里面的data不能指向对象
    //组件中的data必须是一个函数
    data(){
        //这个return 出去的 { } 中，可以定义数据
        return {
            username:'zh'
        }
    },
    methods: {
        btn(){
            //在组件中this就表示当前组件的实例对象
            this.username='zhanghan'
            console.log(this);
        }
    },
    //当前组件中的侦听器
    watch:{

    },
    //当前组件中的计算属性
    computed:{

    },
    //当前组件的过滤器
    filters:{

    }
}
</script>

<style lang="less">
    .box{
        background-color: aquamarine;
        h3 {
            color: red;
        }
    }
</style>

在这里插入图片描述

4.组件之间的父子关系

组件在被封装好之后，彼此之间是相互独立的，不存在父子关系
在这里插入图片描述

在使用组件的时候，根据彼此的嵌套关系，形成了父子关系、兄弟关系
在这里插入图片描述

4.1使用组件的三个步骤

当我们想要再APP.vue文件中用到Left.vue和Right.vue组件，则需要按照下面步骤来进行:
步骤一:使用import语法导入需要的组件
步骤二:使用components节点注册组件
**步骤三:**以标签形式使用刚才注册的组件
我们在步骤一导入组件名字的时候可以是任意名字，但是要和components里面注册时要同步你在步骤一里面接收的组件名字

<template>
  <div class="#app-container">
    <h1>App 根组件</h1>
    <hr/>
    <div class="box">
      <!-- 渲染 Left Right 组件 -->
      <Left></Left>
      <Right></Right>
    </div>
  </div>
</template>

<script>
//1.导入需要的 .vue 组件
import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'

export default {
    //2.注册组件
    components: {
        Left,
        Right
    },
}
</script>

<style lang="less">
.app-container{
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box{
  float: left;
}
</style>

在这里插入图片描述

4.2私有组件和全局组件

私有组件
当我们在components下注册组件后，该组件称为私有子组件，当我们其他的组件想去使用该组件便都需要去注册该组件
例如:
在组件A的components节点下，注册了组件F
则组件F只能用在组件A中，不能被用在组件C中。
因此我们需要利用全局组件来方便我们多次的使用
全局组件
在Vue项目里的main.js入口文件中，通过**Vue.component()**方法，可以注册全局组件，语法格式：

//导入需要全局注册的组件
import Count from '@/components/Count.vue'
//参数1：字符串格式，表示组件的"注册名称"
//参数2：需要被全局注册的那个组件
Vue.component('MyCount',Count)

当我们注册好后，只需要在需要的组件页面内通过标签的方式就可以直接利用该组件

<template>
    <div class="box2">
        <span>Left组件</span>
        <hr/>
        <MyCount></MyCount>
    </div>
</template>

<script>
export default{

}
</script>

<style lang="less">
.box2{
    width: 400px;
    height: 200px;
    background-color: red;
}
</style>

在这里插入图片描述

5.组件里面的 props

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

export default{
    //组件的自定义属性 属性可以为任意属性
    props:['自定义属性A','自定义属性B'...],//数组
    //组件的私有数据
    data(){
        return {

        }
    }
}

案例:自定义按钮点击的初始值
利用Left.vue使用全局组件Count.vue，通过按钮使自定义的初始值增加

<!-- Count 组件 -->
<template>
    <div>
        <h5>Count 组件</h5>
        <p>count 的值为:{{init+count}}</p>
        <!-- 当methods:{ }里面的事件函数执行语句只有一行时，我们可以在methods里面直接省略  -->
        <button @click="count +=1">按钮</button>
    </div>
</template>

<script>
export default {
    //props 是自定义属性，允许使用者通过自定义属性，为当前组件指定初始值
    props:['init'],
    data() {
        return {
            count:0
        };
    },
};
</script>
<!-- Left 组件 -->
<template>
    <div class="box2">
        <span>Left组件</span>
        <hr/>
        <!-- 正常传入的的初始值为一个字符串 我们如果需要转换成数值 则需要加上 : -->
        <!-- 我们都知道 v-bind 里面写的是JS 所以我们输出的是一个数字 9 如果不加 v-bind 则输出一个字符串 "9" -->
        <MyCount :init="9"></MyCount>
    </div>
</template>
<script>
export default{

}
</script>

<style lang="less">
.box2{
    width: 400px;
    height: 200px;
    background-color: rgb(255, 191, 0);
}
</style>

在这里插入图片描述

因此我们发现props里面的数据也可以拿到页面中去渲染数据
注意:在我们没有使用v-bind之前所绑定的值是一个字符串，当我们使用了v-bind后" "内的语句将会变成JS脚本语句

5.1props 是只读的

Vue规定：组件中封装的自定义属性是只读的，我们不能直接修改props的值，否则会直接报错
在这里插入图片描述

我们在上述的案例中实际上是希望count的数值进行增长，但是我们在调试工具里发现最终结果并不是count的值
如果我们想修改props的值，可以把props的值转存到data中，因为data中的值是可读可写的
因此我们可以将上述案例作出修改

<!--只需要修改 Count 组件-->
<template>
    <div>
        <h5>Count 组件</h5>
        <p>count 的值为:{{count}}</p>
        <!-- 当methods:{ }里面的事件函数执行语句只有一行时，我们可以在methods里面直接省略  -->
        <button @click="count +=1">按钮</button>
        <button @click="show">打印this</button>
    </div>
</template>

<script>
export default {
    //props 是自定义属性，允许使用者通过自定义属性，为当前组件指定初始值
    props:['init'],
    data() {
        return {
            count:this.init// 我们可以利用this.init 将值转存到 count里面
        };
    },
    methods: {
        show(){
            console.log(this);
        }
    },
};
</script>

在这里插入图片描述

5.2 props的default默认值

在声明自定义属性时，可以通过default来定义属性的默认值
示例代码:

export default {
    props:{
        init:{
            // 用default属性定义属性的默认值
            default：0
        }
        //自定义属性A：{/配置项A/},
        //自定义属性B：{/配置项B/},
        //自定义属性C：{/配置项C/},
    }
}

我们可以将上述案例在稍作调整
当我们的Left.vue的MyCount组件定义了init的初始值，default将会被覆盖
当Right.vue没有定义初始值，default将生效

<template>
    <div>
        <h5>Count 组件</h5>
        <p>count 的值为:{{count}}</p>
        <!-- 当methods:{ }里面的事件函数执行语句只有一行时，我们可以在methods里面直接省略  -->
        <button @click="count +=1">按钮</button>
        <button @click="show">打印this</button>
    </div>
</template>
<script>
export default {
    //props 是自定义属性，允许使用者通过自定义属性，为当前组件指定初始值
    props:{
        init:{
            //如果外界使用Count组件的时候，没有传递 init 属性，则默认值生效
            //如果用户传了则会被覆盖掉
            default:0
        }
    },
    data() {
        return {
            count:this.init// 我们可以利用this.init 将值转存到 count里面
        };
    },
    methods: {
        show(){
            console.log(this);
        }
    },
};
</script>

在这里插入图片描述

5.3 props的type值类型

在声明自定义属性时，可以通过type来定义属性的值类型。示例代码如下:

export default{
    props:{
        inti:{
            //用 default 属性定义属性的默认值
            default:0,
            //用 type 属性定义属性的值类型
            //如果传递过来的值不符合此类型，则会在终端报错
            type:Number
        }
    }
}

5.4 props的required必填项

required必填项是专门用来校验我们的自定义属性的默认值类型
语法格式:

export default{
    props:{
        inti:{
            //用 default 属性定义属性的默认值
            default:0,
            //用 type 属性定义属性的值类型
            //如果传递过来的值不符合此类型，则会在终端报错
            type:Number,
            //必填项校验
            required:true
        }
    }
}

就比如我们在Left.vue里面MyCount组件标签里面的 init 初始值没有利用v-bind绑定，则他的默认值将会是变成字符串，如果我们在Count.vue全局组件里面的将默认值设置为Number，此时终端将会报错

总结

我们之所以用到props是为了提高组件的复用性，当我们封装了一个共享组件时，每一个组件在使用这个组件时都希望能够传入自己的初始值，因此我们此时可以用到props，在porps里面定义一个init属性，用户可以自定义的去定义init的初始值来传入到props里面的init