如何在vue2.0中自定义组件
这篇文章将为大家详细讲解有关如何在vue2.0中自定义组件,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
10年积累的成都网站设计、成都网站建设经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站制作后付款的网站建设流程,更有田家庵免费网站建设让你可以放心的选择与我们合作。
封装组件的步骤
1. 建立组件的模板,先把架子搭起来,写写样式,考虑你的组件的基本逻辑。
os:思考1小时,码码10分钟,程序猿的准则。
2. 准备组件的好数据输入。即分析好逻辑,定好 props 里面的数据、类型。(后面详解)
3.准备组件的好数据输出。即根据组件逻辑,做好要暴露出来的方法。(后面详解)
4.封装完毕了,直接调用即可。
os: 代码可以不看,结论在文章最后
接下来以一个很简单的例子具体说明一下
现在先看一下demo的效果图
三、 demo代码
父组件:
子组件:
{{this.searchValue}}{{item}}暂无数据
四、代码详解
1. 先说一下 props
我们在父组件中需要将子组件需要的数据导入,用法如下:
:searchList ="searchList"
就是我们的数据,这个可以写多个。这里我传输了2个参数过去,主要是做数据修改的说明。大家可以先忽略。
在子组件中,我们的接收和使用方法如下:
props: { searchList: Array, selectValue: Object }, mounted() { this.data = this.searchList },
我们在 props 中接收数据,注意props对象里面 键值 是对改数据的 数据类型 的规定。做了规范,使用者就只能传输指定类型的数据,否则报警告
二props对象中的数据,我们可以直接在当前组件中使用 this.searchList,可以直接使用。至于原理嘛,不懂的可以取脑补一下 js的原型 。os:这些基础,在这就不做详述了
以上就是props传递过来的数据的使用了。
2. emit的使用(如何暴露组件方法)
我们已经会使用 父组件向子组件传数据了,那如子组件如何来修改父组件的数据呢?
这里提供 2 种实现方法,但是 第一种不推荐,强烈不推荐
方式一:
selectValue: { data: '1' }, 。。。。。。。。。。。。。。。 this.selectValue.data = '我被修改了'
即,父组件将 对象 数据传递给子组件,子组件直接修改props过来的对象的值
可以实现,感觉是一个比较快捷的方式。但是不推荐,这种方式写多了,容易出错,特别是多层组件嵌套的时候。这种修改对代码的迭代和错误的捕捉都不友好,所以建议大家别这样写。
他的实现原理简单提一下: 这个对象、数组啦,是引用数据类型,说白了,就是存储单元的信息是指针,真正数据在别的地方,通过指针查询的数据,所以这样写,对浏览器来说仅仅是传递了一个指针,数据还是同一份数据。所以你能修改。
方式二:
正儿八经的通过 $emit 方法去掉父组件的方法,在父组件中修改data的数据。(根正苗红的方法,规范写法)
// 子组件 this.$emit('selectFunc', value) // 父组件selectFunc(value) { this.selectValue2 = value console.log(this.selectValue) console.log(this.selectValue2) }
关于如何在vue2.0中自定义组件就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
网站标题:如何在vue2.0中自定义组件
当前地址:http://scyanting.com/article/jocjpg.html