vue小总结3

Vue知识总结

对data中数组增加内容

    <div>{{ary[0]}}<div>
    data:{
        ary:[]
    }
    // 若我想向ary中添加属性 this.ary[0] = 1,然后this.ary[0] = 2; 页面数据不会变化，因为在data中定义ary，vue初始化过程中对data中属性进行监听，而后新增的属性就未受到监听。
    // 应该这样添加属性
    ary = [1];
    ary.push(1);
    Vue.set(this.ary,0,1);
    vm.$set(this.ary,0,1)
    // 7个数组变异方法均会受到vue的监控，pop push shift unshift splice reverse

---

对data中对象增加内容

    <div>{{obj.name}}<div>
    data:{
        obj:{
            age:22
        }
    }
    // 错误新增属性：this.obj.name = 'zjx',页面不为所动
    // 正确方式：
    this.obj = {...this.obj,name:'zjx'}
    this.obj = Object.assigns(this.obj,{name:'zjx'})
    Vue.set(this.obj,'name','zjx')
    vm.$set(this.obj,'name','zjx')

---

解决DOM 内模板的限制，例如：tbody中必须使用td标签

vue文档

    // 若出现这种情况
    <table>
        <tbody>
            <row></row>
        </tbody>
    </table>

    Vue.component('row',{
        template:'<td>123</td>'
    })
    
    // 浏览器会报错，因为tbody中必须使用tr标签，vue渲染时并不会智能的判断组件里的td标签，而是直接判断是一个row标签，这是我们应该使用is属性
    <table>
        <tbody>
            <tr is="row"</tr>
        </tbody>
    </table>
    
    // 下面这些话引用vue文档原文，参考：
需要注意的是如果我们从以下来源使用模板的话，这条限制是不存在的：
 - 字符串 (例如：template: '...')
 - 单文件组件 (.vue)
 - <script type="text/x-template">

---

子组件data

子组件data是一个函数返回一个对象，原因是避免各个同子组件公用一套数据，造成数据相互影响。

---

避免在子组件中修改父组件传来的值

    <child :content="{name:'zjx'}"></child>
    // 若真的要修改,应该如此处理
    Vue.component('child',{
        props:['content'],
        data:function(){
            return {
                newContent:this.content
            }
        },
        created(){
            this.newContent = {name:'zzjjxx'};
            console.log(this.content === this.newContent); // false 不是一个引用地址空间
        },
        template:'<div>{{content.name}}{{newContent.name}}</div>'
    });
    // 页面显示 zjx zzjjxx
    // 将传入子组件的属性重新拷贝一份给新属性，再在新属性上操作，两个属性已不指向同一个对象