Vue中父子组件之间的传值

最新推荐文章于 2024-05-27 10:35:52 发布

竹叶轻拂水

最新推荐文章于 2024-05-27 10:35:52 发布

阅读量4.6k

点赞数 4

分类专栏：笔记文章标签： Vue 笔记组件传值

本文链接：https://blog.csdn.net/cbb_2313/article/details/86171387

版权

笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

父组件向子组件传值

父组件data中的msg数据，子组件如何使用？

在使用子组件标签的时候，使用v-bind绑定一个属性，属性名随意(在此我们写为info)，属性值是父组件要传递给子组件的msg
在子组件中使用props数组接收一下父组件传递过来的属性（当然，props也可以是一个对象，可以使每个值都有指定的类型，例如：props: { title: String }，即title的数据类型是String的）
在子组件中可以直接使用info了，显示的值就是父组件中的msg的值
代码演示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div id="app">
      <h2>{{msg}}</h2>
      <!-- 使用子组件（以子组件的名字当做标签即可使用子组件），并向子组件传递了一个msg值 -->
      <son :info="msg"></son>
    </div>
    <script src="./lib/vue-2.4.0.js"></script>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          // 父组件中的msg值，要传递给子组件
          msg: "我是父组件"
        },
        // 定义一个私有的子组件
        components: {
          // 子组件的名字为son
          son: {
            // 子组件显示的内容
            template: "<h2>我是子组件+++{{info}}</h2>",
            // 接收父组件传递过来的值info，里面保存的是父组件的msg
            props: ["info"]
          }
        }
      })
    </script>
  </body>
</html>

在这里插入图片描述

总结：
父传子很简单，就是在使用子组件的时候将要传递的值绑定到属性上，在子组件中用props接收一下，就可以使用了

扩展：如果父组件传递到子组件的值很多，为了避免调用组件的代码过于复杂，可是直接v-bind一个对象：

post: {
  id: 1,
  title: 'My Journey with Vue'
}

下面的模板：

<blog-post v-bind="post"></blog-post>

等价于：

<blog-post
  v-bind:id="post.id"
  v-bind:title="post.title"
></blog-post>

子组件向父组件传值

将子组件的message值传递给父组件：

在created钩子函数中用$emit注册一个方法，给子组件注册点击事件也行，总之事件能够触发，$emit注册的这个方法能够执行就可以，具体使用什么，根据需求而定
$emit的第一个参数是一个方法名（父组件要绑定的名字），第二个参数是子组件要传递给父组件的值
在父组件使用子组件的时候，用v-on绑定一个事件（名称为$emit的第一个参数），事件触发的函数为父组件methods中的方法
在methods中的方法里面接收子组件传递过来的值即可
代码演示：

<!DOCTYPE html>
<html lang="en">
<head>	
	<meta charset="UTF-8">
	<title>子传父</title>
</head>
<body>
<div id="app">
<!-- 在父组件中使用子组件,并用v-on接收子组件传递过来的方法 -->
	<son @chuandi="fangfa"></son>
</div>


<script src="./lib/vue-2.4.0.js"></script>	
<script>
	let vm = new Vue({
		el: '#app',
		data: {
			msg: '我是父组件的数据'
		},
		methods: {
			// 在父组件中定义方法，接收子组件传递过来的值
			fangfa(res){
				console.log(res);
			}
		},
		// 定义一个私有的子组件
		components: {
			// 子组件的名字为son
			son: {
				// 子组件的内容
				template: "<button>子组件标签</button>"
				// 子组件中的数据
				data(){
					return {
						message: "我是子组件的数据"
					}
				},
				// 在created钩子函数中用$emit注册一个方法，第一个参数就是父组件用v-on绑定的属性，第二个参数是子组件要传递给父组件的值
				created(){
					this.$emit("chuandi",this.message);
				}
			}
		}
	});
</script>
</body>
</html>

在这里插入图片描述

总结
子传父的关键在于$emit注册的方法，还有第二个值是要传递的数据，我们可以想象成$emit是广播出去一个方法，并携带数据，在父组件使用子组件的时候，利用v-on绑定一个事件，事件名是$emit广播的方法，事件函数是父组件本身的方法，在父组件的methods中接收传递过来的数据即可