Vue通常是采用组件的形式开发，这种模块化的思想大大加快了开发的进度。如上图所示，这种弹窗是典型的父子组件的设计，它们之间是如何共享数据的呢？
父组件向子组件传值传方法
分两步走:
- 在父组件中动态绑定属性，:parentmsg='msg'
- 子组件中通过 props: 获取。
传方法也是差不多步骤.
//App.vue传值给Header.vue
//App.vue中的写法
<template>
<div id="app">
<Header :parentmsg="title" :func="parfun"></Header>
</div>
</template>
<script>
import Header from '@/components/Header'
export default {
name: 'App',
data(){
return {
title: '父组件中的数据'
}
},
methods:{
parfun(){
console.log('这是父方法')
}
},
components: {
Header
}
}
</script>
// Header.vue的写法
//在props中接受后可以直接使用
<template>
<div>
{{ parentmsg }}
<button @click="func">父方法</button>
</div>
</template>
<script>
export default {
name: "Header",
props: ['parentmsg', 'func']
}
</script>
父组件主动获取子组件数据和方法
主要是通过 $refs 获取子组件对象
- 绑定属性
- 获取子组件对象
//Test.vue
data(){
return {
str:'',
sonmsg: '这是子数据'
}
},
// App.vue
<Test ref="sonmsg"></Test> // 1. 绑定属性
mounted() {
console.log(566, this.$refs.sonmsg.sonmsg) // 2. 获取子组件对象
}
子组件向父组件主动传值
1. 父组件先绑定和定义方法
<Test> @changea = "changea" ></Test>
changea(val){
console.log(599, "val", val)
},
2. 子组件Test做一个提交的方法同时传值给父组件
test(){
this.$emit('changea',1)
}
3. 父组件可以实时触发changea得到子组件传过来的值。
父子组件的互动基本就概括在以上三种情况了，这些是在同一个页面中的方法。如果是不同页面要共享数据，那么可以使用Vuex, Cookie, localStorage这三种方法来实现。除此之外，还有一种前端数据库IndexedDB可以使用，可以很好地在前端中使用。