Vue基础之父子组件的传值

lemon94924

于 2019-04-24 13:49:06 发布

阅读量169

点赞数 2

CC 4.0 BY-SA版权

分类专栏：菜鸡提升第一步 vue基础 Vue

本文链接：https://blog.youkuaiyun.com/lemon94924/article/details/89491251

菜鸡提升第一步同时被 3 个专栏收录

10 篇文章

订阅专栏

vue基础

9 篇文章

订阅专栏

Vue

8 篇文章

订阅专栏

本文详细介绍了Vue.js中父组件与子组件之间的通信方法，包括父组件如何向子组件传递值和方法，子组件如何主动获取父组件的数据，以及父组件如何主动获取子组件的数据。通过实例展示了使用props接收值、通过this.$parent访问父组件数据和利用$refs获取子组件信息的具体操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.父组件给子组件传值（方法）

1.父组件调用子组件，绑定动态属性
  <v-header :title="title" :run="run"></v-header>
2.子组件通过pros接受父组件的传值
  props:['title'，'run']
3.直接在子组件里使用
  	<h2> {{ title }}</h2>
    <button @click="run()">父组件的方法</button>

2. 父组件主动获取子组件的数据方法

1.调用子组件定义ref
         <v-header ref="header"></v-header>
2.父组件里面通过
   		 this.$refs.header.属性
   		 this.$refs.header.方法
3.父组件使用
		<button @click="getChild()">获取子组件方法数据</button>
		methods{
			getChild(){
          	  this.$refs.header.run();
         	 }
         }

3.子组件主动获取父组件的数据方法

	子组件中使用：
				this.$parent.数据
    			this.$parent.方法
    
    <button @click="getParent()"> 获取父组件</button>
   	methods:{
     	   getParent(){
         		 alert(this.$parent.msg);
        		  this.$parent.run();
      	  }
  	  }