你的位置:首页 > 信息动态 > 新闻中心
信息动态
联系我们

初识Vue,个人小记

2021/11/3 1:00:22

监听数据变化

        watch方法                能在数据变化后做任何操作

        用法,数据名(参数1,参数2)

                参数1是新数据,参数2是旧数据

        computed方法        只能计算变化后的数据

        用法,命名(不用在data中声明)(){      return   需要做的操作        }

watch: {
            num(newValue, oldValue){
                console.log(newValue);
                this.nums = `${newValue} + ${this.sun}`
            },
            sun(ne, ol){
                console.log(ne);
                this.nums = `${this.num} + ${ol}`
            },

        },
        computed: {
            result(){
                return this.sun + '拼接' +this.num
            }
        }

两者比较,watch啥都能实现,computed能直接显示且性能较优

插槽应用

        slot                直白的说就是在子组件中安放一个传送点,需要修改什么可以直接定位修改

        注意点:当只有一组定位关系时可以不命名

                       当多组定位关系,父组件slot=“名字” 子组件slot name=“名字”进行对应

                       当要传递值时,直接:属性=“属性值”传递,

                                                父组件接收为一个数组slot-scope="自定义"

//父组件代码
<div @click="clickFn(data)" slot="change" slot-scope="data">

//对应的子组件代码
<slot name="change" :state="row.state" :id="row.id" />