1、父传子 props
父组件 ==》 <Children :dataInfo="dataInfo" />
子组件
普通 ==》 props: ["dataInfo"]
严谨给默认值 ==》
props: {
dataInfo: {
type: Object,
default: () => {}
}
动态传值 wacth监听 ==》
在子组件中用watch()监听值的改变,不同的类型的要用不同的监听方法 数组、对象深度监听
watch: {
string:(newValue,oldValue){ // 一般监听
console.warn(newValue)
}
dataInfo:{ // 深度监听
handler(newValue, oldValue){
console.warn(newValue)
},
deep: true
},
},
2、在父组件中用ref="str" 来声明组件,然后通过this.$refs.str.method()在值改变的地方来调用子组件中的方法
父组件 ==》 <Children ref="children" />
methods: {
refresh() {
this.$nextTick(()=> { // 这种方法数据解决不能够及时渲染
this.$refs.children.init(val)
})
}
}
子组件 ==》
methods: {
init(val) {
this.$refs.children.init(val)
}
}
3、子向父组件传值 $emit
字组件 ==》
methods: {
handleClick(val) {
this.$emit("handleClick", val)
}
}
父组件 ==》
<Children @handleClick="childrenClick" />
methods: {
childrenClick(val) {
console.log(val,'调用子组件的方法传值')
}
}
4、vuex 通信
https://blog.csdn.net/c153284575/article/details/103700628
5、event bus通信
https://blog.csdn.net/c153284575/article/details/103700069
6、SessionStorage通信