Vue中父子组件之间的传值
父组件向子组件传值子组件向父组件传值
·
父组件向子组件传值
父组件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
中接收传递过来的数据即可
更多推荐
已为社区贡献4条内容
所有评论(0)