
深入理解Vue组件
风里有诗句哈
有事请私信
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Vue中循环注意点和动态改变数组或对象的方法
基础部分:<template></template>模板占位符作用类似于div来包裹一些元素,但不会渲染到页面上Vue默认会复用相同的组件,但可以传入不同的key值来解决这个问题列表循环注意点:提高循环性能最好有独一无二的key值,且尽量不要使用index作为key值,一般后端会在传入数据时使用id作为前值,可以使用id作为key值在Vue中不能...原创 2019-02-07 16:00:06 · 2907 阅读 · 0 评论 -
深入理解Vue组件八——动态组件与v-once指令
component是一个动态组件,通过is属性的变化来达到动态组件变换的效果加入v-once指令后该组件会存储在内存中,再次调用时并不需要重新创建该组件,可以提高页面展示效率 ...原创 2019-02-09 22:02:14 · 258 阅读 · 0 评论 -
深入理解Vue组件七——Vue中的作用域插槽
作用域插槽就是父组件在调用子组件的时候给子组件传了一个插槽,这个插槽为作用域插槽,该插槽必须放在template标签里面,同时声明从子组件接收的数据放在一个自定义属性内,并定义该数据的渲染方式子组件向外传递item参数,父组件使用props.item来接受这个参数适用于多次调用子组件时产生不同的渲染效果 ...原创 2019-02-09 21:26:04 · 467 阅读 · 1 评论 -
深入理解Vue组件六——在Vue中使用插槽
child标签内的内容就是子组件中slot标签显示的内容如果child中的内容为空,页面会显示slot标签中显示的内容可以给slot取名来使用多个slot插槽如果没有传入这个插槽,就会触发默认插槽...原创 2019-02-09 19:32:15 · 842 阅读 · 0 评论 -
深入理解Vue组件五——非父子组件间的传值(总线传值)
Vue的原型设置一个bus属性指向Vue实例,这样每个Vue实例就都会有bus属性生命周期钩子mounted,这个组件被挂载的时候会执行这个函数因为bus是一个实例,它能监听这个组件向外发出的change,监听到这个change时触发一个函数这个函数中的作用域发生了变化,所以需要把this做一个保存...原创 2019-02-09 17:08:36 · 342 阅读 · 0 评论 -
深入理解Vue组件四——给组件绑定原生事件
在子组件中的点击事件会被触发,而在父组件中的点击事件并不会被触发原因是子组件的点击事件是原生事件,而父组件中的点击事件是自定义事件触发自定义事件当子组件中的原生事件被点击时触发handleChildClick方法,handleChildClick方法向外触发一个click事件,父组件接收click事件,当此事件被点击时,触发父组件的handleClick事件,但这样两层传递是不是很...原创 2019-02-09 16:26:04 · 656 阅读 · 0 评论 -
深入理解Vue组件三——组件参数校验与props特性
组件参数校验即子组件可以对父组件传递过来的值做一些约束校验时须注意此时的props是一个对象而不是数组如下图,父组件向子组件传递的content参数必须是字符串类型父组件向子组件传递的content参数可以是字符串类型或数字类型当然,父组件也可以不传值,让子组件使用初始值required为false时表示父组件可以不传content值,为true时必须传conten...原创 2019-02-09 15:43:58 · 739 阅读 · 0 评论 -
深入理解Vue组件二——父子组件间的传值
1.父组件向子组件传值父组件中使用:conut=“1”传递给子组件,子组件中使用props接收count父组件可以随意的向子组件传值,但子组件可以使用但不可以修改父组件传递过来的值,因为:conut=“1”中“:”表示的是单向数据流但我们可以在子组件中重新克隆这个数据2.子组件向父组件传值子组件在方法中向外触发一个inc事件,并携带一个参数,父组件接收子组件的inc事件...原创 2019-02-09 15:28:19 · 295 阅读 · 0 评论 -
深入理解Vue组件一——组件使用中的细节点
组件使用中的细节点1.H5的标准中tbody内必须为tr元素,但我们想用组件来代替tr时,组件会在tbody外导致错位的bug,可以用is属性来解决这个问题同理,ol或ul中的li标签,还有select中的option标签也可以使用is属性来解决这个问题2.定义vue实例中的data时,data可以是一个对象,但是在定义子组件中的data时,data必须是一个函数,且须返回一个对象...原创 2019-02-07 21:01:11 · 392 阅读 · 0 评论 -
一图掌握Vue中组件的生命周期
原创 2019-02-21 08:59:44 · 217 阅读 · 0 评论