1.Vuex
2.LocalStorage
3.props / $emit:
父组件通过props的方式向子组件传递数据,而通过$emit子组件可以向父组件通信。
4.$children / $parent:
this.$children[0].msg = "hello world" //父组件修改子组件data中的数据
this.$parent.mag //子组件拿到父组件data中的数据
$children的值是数组,$parent的值是个对象
注意:$parent,$children它们的目的是作为访问数组的应急方法,更推荐用props和events实现父子组件通信。
5.ref / refs:
ref:如果在普通的DOM元素上使用,引用指向的就是DOM元素;如果用在子组件上,引用就指向组件实例,可通过实例直接调用组件的方法或访问数据。
//父组件
<template>
<component-a ref="comA"></component-a>
</template>
<script>
export default{
mounted(){
const comA = this.$refs.comA;
console.log(comA.name)//Vue.js
comA.sayHello() //hello
}
}
</script>
//子组件
export default{
data(){
return {
name:"Vue.js"
}
},
methods:{
sayHello(){
console.log("hello")
}
}
}