Vue 父组件给子组件传值传方法以及将整个实例传给子组件

柔情只为你懂 2022-04-23 02:00 197阅读 0赞

父组件是如何给子组件传值呢？我总结了一下大体的方法，如下：

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

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

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

完整代码如下：  
Home.vue

<template>
        
        <div id="home">
            
            <v-header :title="title" :homemsg='msg' :homerun='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:'首页', } }, components:{ 'v-header':Header, //挂载组件 }, methods:{ run(data){ alert('我是Home组件的run方法'+data) // data为参数 } }, } </script>
    
    <style scoped> </style>

Header.vue

<template>
        <div>
            <h2>我是一个头部组件---{
       {title}}---{
       {homemsg}}</h2>   
    
            <button @click="homerun('123')"> 执行父组件的方法</button>   
    
            <button @click="getParent()"> 获取父组件的数据和方法</button>
    
        </div>
    </template>
    
    <script> export default { data(){ return{ msg:'子组件的msg'/*子组件和父组件都有msg， 调用的依然是父组件的数据*/ } }, methods:{ getParent(){ //alert(this.title) 父组件中title的数据 //alert(this.home.title) 照样可以弹出父组件title的数据 this.home.run() //执行父组件run的方法 } }, props:['title','homemsg','homerun','home'] //父组件调用子组件时给子组件传值 } </script>

希望此篇播客能对读者有所帮助，若有任何疑问或是不解，请在下方评论，谢谢。