vue---5

• 视图强制渲染

<div id="app">
    <!-- <h1>{{obj}}</h1>
    <button @click="fn1">添加age</button>
    <button @click="fn2">删除age</button> -->
    <!-- <h1>{{list}}</h1>
    <button @click="add">添加benchi</button> -->
    <ul>
        <li v-for="(v,i) in arr" :key="i" @click="del(i)">{{v}}</li>
    </ul>
    <button @click="addAge">addAge</button>
</div>
<script src="./vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            obj:{
                name:'张三'
            },
            list:[{
                car:'bmw',
            }],
            arr:[{name:'zhangsan'},{name:'lisi'}]
        },
        methods: {
            fn1(){
                /* 第一种值和视图都改变的方式 */
                // this.$set(this.obj,'age',30)
                /* 第二个种更直接更暴力的渲染视图的方式 */
                this.obj.age = 30;
                this.$forceUpdate();
            },
            fn2(){
                /* 第一种删除对象里面的属性更新视图的方式 */
                // delete this.obj.age;
                // this.$forceUpdate();
                /* 第二种删除对象里面的属性并更新视图的方式 */
                /*  $delete 第一个参数是 目标对象 第二个参数是 具体的key
                要使用字符串*/
                this.$delete(this.obj,'age')
                console.log(this.obj)
            },
            add(){
                /* 第一种方式 */
                // this.$set(this.list,0,{car:this.list[0].car,car2:'benchi'})
                this.$set(this.list[0],'car2','benchi')
                /* 第二种方式 */
                // this.list[0].car2 = 'benchi'
                // this.$forceUpdate();
                console.log(this.list)
            },
            addAge(){
                // this.arr.forEach(r=>{
                //     r.age = 30;
                // })
                // this.$forceUpdate();

                this.arr.forEach(r=>{
                   this.$set(r,'age',30)
                })
            },
            del(i){
                /* 删除对象的某一个属性 */
                // this.$delete(this.arr[i],'name')

                // delete this.arr[i].name;
                // this.$forceUpdate();

                /* 删除数组的一个对象 */
                this.arr.splice(i,1);
                this.$forceUpdate();
                
                // this.$delete(this.arr,i)
            }

            /* 有一个对象 数组对象[{name:'zhangsan'},{name:'lisi'}]
            渲染到页面上 用ul 循环li渲染 写一个按钮点解可以把数组的每一项加上age:30 并展示 
            点击li的时候 可以删除当前项的name属性*/
        },

    })
</script>

• 组件的插槽

<div id="app">
    <child-a>
        <h1 slot="gy1">我爱美丽的小公园1</h1>
        <h1 slot="gy2">我爱美丽的小公园2</h1>
    </child-a>
</div>
<template id="childA">
    <div>
        <!-- 匿名插槽 <slot></slot> -->

        <!-- 具名插槽 -->
        <slot name="gy1"></slot>
        <h1>我是childA</h1>
        <slot name="gy2"></slot>
    </div>
</template>
<script src="./vue.js"></script>
<script>
    new Vue({
        el:"#app",
        /* 注册组件的命名是首字母大写 使用组件的时候中间要使用-分割 */
        components:{
            ChildA:{
                template:"#childA"
            }
        }
    })

    /* 我有一个模态框组件child 需要显示标题 内容 和底部button */
    /* 现在默认只有中间的内容 我需要使用child的时候 插入标题 和底部button
    请问怎么实现 */
</script>