监听数据变化
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" />