本文详细介绍了Vue中组件间的数据传递，包括父组件如何通过v-bind和props向子组件传递值和方法，子组件如何使用this.$emit向父组件传值，以及v-on中函数加括号和不加括号的差异，以及子组件向父组件传递列表的步骤。
父组件向子组件传递父组件中的值
即父组件向子组件传值，步骤总共有两步
第一步：把数据通过v-bind自定义属性传递给子组件
第二步：用props接收自定义属性
此处，子组件中自定义了smsg，通过v-bind将smsg绑定父组件的msg，然后在子组件的props属性中接收我们自定义的属性smsg
props属性不仅可以接收数组，也可以接收对象
全部代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件传值:父组件向子组件传值</title>
</head>
<body>
<div id="app">
<com1 :smsg="msg"></com1>
</div>
<template id="temp1">
<div>
<h1>组件传值{
{smsg}}</h1>
</div>
</template>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
var com1={
template:'#temp1',
// 已数组形式传值
// props:['smsg'],
// 以对象形式传值
props:{
smsg:{
type:String
}
}
}
var vm=new Vue({
el:'#app',
data:{
msg:"父组件"
},
components:{
com1
}
})
</script>
</body>
</html>
运行：
父组件向子组件传递父组件的方法
一共有两步：
第一步：用v-on将父组件中的方法通过子组件中自定义的事件传递给子组件
第二步：用this.$emit触发父组件的方法
全部代码
<!
最低0.47元/天 解锁文章
334
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
