vue基础：父子组件传值

vue基础：父子组件传值

一.父–>子

1.父组件调用子组件的时候，在父组件中绑定动态属性。

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

2.子组件中通过props接受父组件传来的数据

props:['title']//接受父组件传来的title

Header.vue

<template>
    <div>
        <h2>我是一个头部组件--{{title}}</h2>
        <br>
        <button @click="run(123)">click</button>
        <br>
        <button @click="getparent()">获取父组件的属性和方法</button>
    </div>
</template>
<script>
export default {
    data(){
        return{
            msg:'msg'
        }
    },
    methods:{
        getparent(){
            // alert(this.title)
            // alert(this.home.title)
            this.home.run(12);
        }

    },
    props:['title','run','home']//接受父组件传来的title
}
</script>

Home.vue

<template>
    <div>
        首页组件
        <br>
        <v-header :title="title" :run="run" :home="this"/>
    </div>
    
</template>
<script>
import Header from './Header.vue';
export default {
    data(){
        return{
            msg:'我是一个home组件',
            title:'首页111'
        }
    },
    components:{
        'v-header':Header
    },methods:{
        run(data){
            alert("我是home组件的run方法"+data);
        }
    }
}
</script>


```html
App.vue