vue父组件给子组件传值方法

src/components 组件

Header.vue

<template>
    <div>    
        <h2>我是头部组件--{{title}}---{{homemsg}}</h2>
        <button @click="run('123')">执行父组件的方法</button>
        <br />
        <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()
        }
    },
    props:['title','homemsg','run','home']    
}
</script>

Home.vue

<template>
    <!-- 所有的内容要被根节点包含起来 -->
    <div id="home">   
        <v-header :title="title" :homemsg='msg'  :run="run"  :home="this"></v-header>
        <hr>
         首页组件   
    </div>
</template>
<script>
/*
父组件给子组件传值

    1.父组件调用子组件的时候 绑定动态属性
        <v-header :title="title"></v-header>

    2、在子组件里面通过 props接收父组件传过来的数据
*/
    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>
<style lang="scss" scoped>
    /*css  局部作用域  scoped*/
    h2{
        color:red
    }   
</style>

App.vue

<template>
    <!-- 所有的内容要被根节点包含起来 -->
    <div id="home">   
        <v-header :title="title" :homemsg='msg'  :run="run"  :home="this"></v-header>
        <hr>
         首页组件   
    </div>
</template>
<script>
/*
父组件给子组件传值

    1.父组件调用子组件的时候 绑定动态属性
        <v-header :title="title"></v-header>

    2、在子组件里面通过 props接收父组件传过来的数据
*/
    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>
<style lang="scss" scoped>
    /*css  局部作用域  scoped*/
    h2{
        color:red
    }   
</style>

vuedemo父组件传值02

##### 组件

Header.vue

<template>
<div>
<h2>我是头部组件--{{title}}</h2>
</div>
</template>
<script>
export default{
data(){
return{
msg:'子组件的msg'
}
},
methods:{
},
//https://cn.vuejs.org/v2/guide/components.html#Prop-验证
props:{
'title':String
}
}
</script>

Home.vue

<template>

<div id="home">
<v-header :title="title"></v-header>

---

首页组件
</div>
</template>
<script>
/*
父组件给子组件传值
1.父组件调用子组件的时候 绑定动态属性
<v-header :title="title"></v-header>
2、在子组件里面通过 props接收父组件传过来的数据
/
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>
<style lang="scss" scoped>
/css 局部作用域 scoped*/
h2{
color:red
}
</style>

App.vue

<template>
<div id="app">
<v-home></v-home>
</div>
</template>
<script>
import Home from './components/Home.vue';
export default {
data () {
return {
msg:'你好vue'
}
},
components:{ /前面的组件名称不能和html标签一样/
'v-home':Home,
}
}
</script>
<style lang="scss">
</style>