Vue 父组件与子组件之间传值

1、父组件与子组件之间值传递步骤以下：

例如：我有一个父组件Myhome.vue 和一个子组件Header.vue

一、父组件调用子组件的时候，动态绑定属性值

 <v-myheader :title="title"></v-myheader> 

二、在子组件使用 props 来接受父组件传过来数据（props:['title']），若是是多个就定义多个属性就能够

 

完整代码以下：

一、Myhome.vue(父组件)代码以下：

<template>
<div id="homeapp">
<h1>这是一个home123</h1>
 <v-myheader :title="title"></v-myheader> 
 </div>
</template>

<script>
import MyHeader from './Header.vue';
export default {
   name:'myhome',
    data () {
        return {
         title:'父类数据'
        }
    }
    ,components :{
        'v-myheader':MyHeader
    }

}
</script>

二、Header.vue（子组件）代码以下：

<template>
<div id="headerapp">
<h3>这是头部组件（子组件）</h3>
<h2>父类数据--{{title}}</h2>
</div>
</template>

<script>
export default {
    data() {
        return {
          msg:'mgs'
        }
    },methods:{

    }
    ,props:['title']
}

</script>

 二、除了传递属性之外还能传递方法和父组件的对象，若是是传递父组件的对象，那么在子组件里就能经过父组件对象获取属性和方法、数据

代码以下：

父类组件代码以下：

<template>
<div id="homeapp">
<h1>这是一个home123</h1>
 <v-myheader :title="title" :show='show' :home="this"></v-myheader> 
 </div>
</template>

<script>
import MyHeader from './Header.vue';
export default {
   name:'myhome',
    data () {
        return {
         title:'父类数据'
        }
    }
    ,methods:{
        show(a) {
            alert('我是父组件方法'+a);
        }
    }
    ,components :{
        'v-myheader':MyHeader
    }

}
</script>

其中:

:show='show'->表示传递方法
:home="this"->表示传递父类实例对象

子组件代码以下：

<template>
<div id="headerapp">
<h3>这是头部组件（子组件）</h3>
<h2>父类数据--{{title}}</h2>
<button @click="show(123)">调用父类方法</button>
<button @click="getparentdata()">获取父组件数据和方法</button>
</div>
</template>

<script>
export default {
    data() {
        return {
          msg:'mgs'
        }
    },methods:{
        getparentdata (){
            alert(this.home.title);
        }

    }
    ,props:['title','show','home']
}

</script>

 3、父组件主动获取子组件的方法和属性

一、调用子组件的时候定义一个ref

v-myheader ref="header"></v-myheader>

二、在父类经过

属性获取：this.$refs.header.属性

方法获取：this.$refs.header.方法

 

4、子组件主动获取父组件方法和属性

属性获取：this.$parent.属性

方法获取：this.$parent.方法