Vue中父子组件的互动 / 网络研习社#70

Vue通常是采用组件的形式开发，这种模块化的思想大大加快了开发的进度。如上图所示，这种弹窗是典型的父子组件的设计，它们之间是如何共享数据的呢？

父组件向子组件传值传方法

分两步走:

1. 在父组件中动态绑定属性，:parentmsg='msg'
2. 子组件中通过 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 获取子组件对象

1. 绑定属性
2. 获取子组件对象

 //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可以使用，可以很好地在前端中使用。