9-4 Vue 缓存和子传副(组件)方法绑定
学习了Vue框架近三个月,现在对数据绑定有了点认识,但是发现自己反而对js不是特别的熟。
下面是今天写代码刚好碰到的问题:
缓存的话:3句代码
sessionStorage.setItem("name", val);
let backValue = sessionStorage.getItem("name");
sessionStorage.removeItem("name");
1.父传子(常见):
{{value}}
父组件里:<children :childValue="value">这是导入一个子组件</children>
子组件:{{childValue}}
props: { childValue: String,
required: true }
2.子传父:
在子组件里 声明方法和可以带个参数
{{childValue}}
this.$emit("getBackValue", this.childValue);
在父组件里:在父组件接受方法和参数
@getBackValue="getBackValue2"
getBackValue2(val){
console.log(val)
}
3.借助第三方互相传值
比如用公用的Bus
传值组件:
{{elementValue}}
Bus.$emit('val', this.elementValue)
接收组件:
{{name}}
Bus.$on('val', (data) => {
console.log(data);
this.name = data;
})
传值前两个目前经常碰到用到 第三个 还没使用经验