Vue 父子组件传值

/*

父组件给子组件传值

 

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

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

 

    2、在子组件里面通过 props接收父组件传过来的数据

*/

*

父组件给子组件传值

 

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

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

 

    2、在子组件里面通过 props接收父组件传过来的数据

        props:['title']

 

 

 

        props:{

 

            'title':String      

        }

Header.vue

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

}

 

Home.vue

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

import Header from './Header.vue';

export default{

        data(){

            return {               

               msg:'我是一个home组件',

               title:'首页111'

            }

        },

        components:{

 

            'v-header':Header

        },

 

父组件主动获取子组件的数据和函数

父组件主动获取子组件的数据和方法：

 

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

 

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

 

    2.在父组件里面通过

 

        this.$refs.header.属性

 

        this.$refs.header.方法

 

 

 

 

 

子组件主动获取父组件的数据和方法：  

 

        this.$parent.数据

 

        this.$parent.方法

*/