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组件

<template>
    <input type="text" :value="inputValue" @input="inputHandler">
</template>
<script>
export default {
    props: {
        value: {
            type: String,
            default: ''
        }
    },
    data(){
        return {
            //单向数据流原则，组件内不能修改props数据
            inputValue: this.value  //应该与父组件传来的value独立开
        }
    },
    methods: {
        inputHandler(e){
            this.inputValue = e.target.value;
            // value同步给父组件
            this.$emit('input', this.inputValue);
        }
    }
}
</script>

然后在父组件中使用

<yu-input v-model="inputValue"></yu-input>
//相当于
<yu-input :value="inputValue" @input=""></yu-input>

组件库开发利器provide和inject

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

组件标签上的属性

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

比如

<news a="123" :num1="num" :num="num"></news>

最后的真实dom节点

<div a="123" num1="0" num="0">...</div>

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

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

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

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

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

<comp2 v-bind="$attrs" v-on="$listeners"></comp2>

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