使用vueJs踩过的坑

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_37041355/article/details/83305266

使用vueJs踩过的坑

1.数据与视图不响应问题

因为 Vue 无法探测普通的新增属性 ，所以向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。需要采用vue提供的方法，才能保证视图与数据是响应的。

vm.$set( target, key, value )   //使用官方提供的方法
//例如
data:{
    info=[[],[]]     //一个数组中有2个空数组。
}，
created(){
    //视图与数据不响应。
    this.info[0] = {name:'shangshan'}
    this.info[1] = {name:'lisi'}
        
    //响应。
    this.$set( this.info, 0, {name:'shangshan'})    //向第1个数组添加数据
    this.$set( this.info, 1, {name:'lisi'})        //向第2个数组添加数据
}

2.子组件向父组件传值，或者组件之间的通信。

创建一个公共vue实例，用于各组件通信，

let bus = new Vue()

组建一：

bus.$emit('event',data)

组件二：

bus.$on('event',function(data){
    console.log('来自组件一的数据'，data)
})