vue2.0-子组件获取父组件数据

vue2.0-子组件获取父组件数据

 参考：https://vuejs.bootcss.com/v2/guide/components-props.html

 

子组件获取父组件数据

 

子组件可以获取父子的数据和方法

子组件：Header.vue

父组件：Home.vue

 

父组件配置

<template>

  <div class="hello">

    <v-header  :title="title" :aaa='aaa' :run="run" :home="this"></v-header>

    <h4>{{ aaa }}</h4>

  </div>

</template>

 

<script>

import Header from './Header.vue'

export default {

  name: 'home-component',

  data () {

    return {

      aaa: '我是一个首页home组件',

      title: '首页', //将父组件的值传给子组件:父组件绑定子组件属性，子组件接收父组件属性

      flag: true

    }

  },

  methods:{

    run(data){

      alert('我是Home组件方法'+data);

    }

  },

  components:{

    'v-header':Header

  }

}

</script>

 

<style scoped>

</style>

 

子组件配置

<template>

  <div class="hello">

    <h3>我是一个{{ ccc }}</h3>

    <h3>数据来自父组件---{{ title }}--{{ aaa }}</h3>

    <button @click="run('--123')"> 执行父组件的方法</button>

    <button @click="getParent()">获取父组件的数据和方法</button>

  </div>

</template>

 

<script>

export default {

  name: 'header-component',

  data () {

    return {

      ccc: '头部组件'

    }

  },

  methods:{

    getParent(){

      //alert(this.home.title);

      this.home.run('--你好')

    }

  },

  props:['title','aaa','run','home']

}

</script>

 

<style scoped>

  h3{

      color: darkkhaki;

    }

</style>

 

 

啊啊啊