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

Posted 2021-01-28 daiyekun-blog

一、父组件与子组件之间值传递步骤如下：

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

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

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

2、在子组件使用 props 来接受父组件传过来数据（props:[‘title‘]），如果是多个就定义多个属性就可以

 

完整代码如下：

1、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>

2、Header.vue（子组件）代码如下：

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

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

    }
    ,props:[‘title‘]
}

</script>

 2、除了传递属性以外还能传递方法和父组件的对象，如果是传递父组件的对象，那么在子组件里就能通过父组件对象获取属性和方法、数据

代码如下：

父类组件代码如下：

<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>