vue的一些知识点

数据更新列表却不重新渲染

例如数组中一个对象中的一个字段数字变了，这时vue并不会更新视图。为什么呢？

还是上面举的例子，用 this.$set 解决

//购物车中某个商品数量加1了，这时再watch环境下
if(this.goodsList.length > 0){//如果购物车列表有数据则寻找有没有已存在的
    this.exist = this.goodsList.some((item, index) => {
        if(item.id == newVal.id){
            //如果商品已存在， 则数量加1
            this.$set(this.goodsList, index, {...newVal, quantity: ++item.quantity});
            return true;
        }
    })
}

 

在组件标签中使用v-model

v-model是个特殊的语法糖，相当于绑定了:value和@input两个。

比如，我们自己封装一个input组件

然后在父组件中使用

//相当于

 

组件库开发利器provide和inject

项目中一般推荐用Vuex，当在开发组件库是这招还是很好使的。参考文章 官方文档

 

组件标签上的属性

一般在组件标签上定义的属性我们都会在组件中用 props 接收，但如果不用 props 的话，那么这些属性默认会挂载的该组件的真实dom根节点上。

比如

最后的真实dom节点

...

如果没用 props 接收，且又不想在真实dom节点上显示这些属性的话，可以在组件中用 inheritAttrs: false 处理。

同时，可以在组件中用 $attrs 来获取没用 props 接收的属性数据。

 

v-bind和v-on单独使用（组件隔代传递属性及事件）

所谓 v-bind 单独使用，一般情况下我们都是 v-bind:xxx（简写 :xxx）这样使用，但其实 v-bind 还可以单独使用（这时不能简写了），比如可以把当前组件的 $attrs 传递给子组件。

同理， v-on 单独使用也可以把当前组件的 $listeners 传递给子组件。

这样 comp2组件就拿到了父组件的 $attrs 和 $listeners