Vue-组件开发(上)

Vue-组件开发(上)

文章目录 Vue-组件开发(上)1.什么是组件化开发2.Vue中的组件化开发3.Vue组件的三个组成部分3.1在组件中定义methods方法3.2 在Vue组件中启用less语法 4.组件之间的父子关系4.1使用组件的三个步骤4.2私有组件和全局组件 5.组件里面的 props5.1props 是只读的5.2 props的default默认值5.3 props的type值类型5.4 props的required必填项 总结

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