Vue学习杂记(二)——组件总结


    引言:最近感觉写代码动力不足,觉得自己有点一直很憨的写代码了,因此决定好好学一下Vue,将之前没有掌握的一下关于Vue2.0的细节巩固一下。避免出现没听说过、没讲过的尴尬情况。可能会出系列文章,有些时候想写一些东西,但是笔记本不在身边。比较适合像我一样的主动(或者由于项目进度需要)上手框架,但是基础知识不够扎实的小白。


    也曾模仿过基于Vue的框架写过组件,但是对于组件的理解一直不够全面,因此,今天解决这个问题。
一、为什么使用组件?

    作为一名软件工程的铁憨憨,对于项目需求的易变性理解的尤其深刻。往往你写了一套代码,你发现这套代码可以用于其他的场景,只需要调整某些内容。因此CV便成为了快乐源泉,直接将那一套代码搬到多个页面去(这里说的搬不是那么纯粹,指的是主要代码一致)。之后需求变化了,需要你修改一下样式或者逻辑,这时就尴尬了,由于页面是CV的,这时你大概率需要修改好几个页面。你可能当时觉得Git上的代码量挺多的,但是,现在今天变一下需求,吗,今天变一下需求,改着改着就容易烦躁。
    组件,完美的解决了这个问题。这才用的就是封装的思想,你可以利用Vue组件机制构建<dynamic-list></dynamic-list>(动态列表组件),然后就能够再多个页面中快速插入代码了。如果修改,你只需要修改dynamic-listd的组件源码就行。

二、组件如何使用?

简单贴一手代码:

<div id="app">
        <child search-text="凌空暗羽"></child>
    </div>
    <script>
        let app=new Vue({
            el:'#app',
            components:{
                child:{
                    props:['searchText'],
                    template:'<div>输出昵称:{{searchText}}</div>'
                }
            }
        })
    </script>

Vue 中构建组件的方式有两种:
(1)在挂载点内部使用 componentstemplate 属性来设置内容;
(2)使用Vue.components("child",{template:" "})的形式;
Vue构建出来的子组件同样遵循插值语法,只是插值语法中对于数据的处理用的是函数的形式返回,比如,那上面的searchText来说,对应的赋值语法为:

components:{
	child:{
			data:function(){
				return {
					searchText:"凌空暗羽"
					};
				}	
		}
}

补充说明:这里的组件同样支持计算属性,同时如果想要获取父组件的传递过来的值,可以先使用 props['searchText'] 得到传值变量,然后在template里面直接使用插值语法便可,最后,如果设计的组件存在大小写,那么需要将组件使用-连接,例如组件 dynamicList 即对应实例标签 <dynamic-list></dynamic-list>
    另外组件同样可以实现数据的双向绑定:
在这里插入图片描述
这里遇到了一个问题,刚好解释了Vue中对于大小写的处理机制,对于变量,Vue不区分大小写,但是对于组件名称和props属性,遇到大写时,Vue会将大写转化成 new-msg 的形式。
抛开这个问题,子组件的数据能够与父组件绑定,用过:符号激发变量实现。

三、父子组件传值的解耦

    耦合度同样是软件工程中经常提到的一个概念,可以大概理解成:用于描述两个对象之间的关联程度。在Vue2中,更加强调组件传值的解耦,也就是不希望出现像上面那种v-model的数据多边绑定,因为这样很容易出现子组件将父组件内容修改了的情况,不利于项目的维护:
在这里插入图片描述
优化方法就如同英文所说,可以存在两种方法一种是计算属性,另一种是在data里面设置变量获取父组件传递的值,都是通过间接获取父组件传值来防止修改父组件。
    需要注意的是Vue中的父子组建通信传递的是对象或者数组时,由于JavaScript中的对象与数组是引用类型,可以跳过Vue通信规则的检测,造成子组件修改父组件的情形:
在这里插入图片描述
实例解释:这里给父组件绑定两个变量,一个是对象类型,一个是普通变量。通过this._props修改子组件的值,发现对象能跳过检测同时修改了父组件,而普通变量会产生警告提示,解决方法,深拷贝:
在这里插入图片描述

四、组件通信

    组件通信可以大致分成三类:父组件向子组件通信、子组件向父组件通信、跨级组件通信;
(1)父组件向子组件通信前面已经介绍了;
(2)子组件向父组件通信,主要是使用 $emit 与 $on并结合中间函数通信,实例代码如下:
在这里插入图片描述
需要注意的是:this.emit 方法不能使用驼峰命名的函数,当然在如今的uni-app组件自定义中并无这个问题。
    规范的通信主要是props 和$emit 方法,但是随着Vue项目的扩大,组件通信传化成了如下形式:
(1)基于子链和父链:$parent 和 $children,通过this.$parent能够获取到当前组件的所有父级组件,由于渲染顺序可能不一致,因此不能够根据索引来获取组件,转化成使用this.$refs.name.data的形式(name表示的是组件中ref属性的值,data即组件data里面的数据):
在这里插入图片描述
(2)中央bus通信机制:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

凌空暗羽

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值