1. 父组件向子组件传递
父组件向子组件传递信息也可以叫属性下行,在子组件上绑定一个自定义属性,属性值为父组件的模型数据,然后子组件通过props属性来接收传过来的数据。
<div id="app">
<parentComponent></parentComponent>
</div>
<div id="parent">
<childComponent :liNum="liNum"></childComponent>
</div>
<ul id="child">
<li v-for="i in liNum">
{{i}}
</li>
</ul>
<script>
var parentComponent = {
template:"#parent",
data:function(){
return {
liNum:10
}
},
components:[childComponent]
}
var childComponent = {
template:"#child",
props:["liNum"]
}
new Vue({
template:"#app",
components:[parentComponent]
})
</script>
2. 子组件向父组件传递
子组件向父组件传递信息也可以叫事件下行,通过在子组件上绑定一个自定义事件,事件函数为父组件定义,最后在子组件内定义一个事件来触发自定义事件(this.$emit(“自定义事件”,“传递的数据”))。
<div id="app">
<parentComponent></parentComponent>
</div>
<div id="parent">
<childComponent @childInfo="parentMe"></childComponent>
</div>
<div id="child">
<button @click="info"></button>
</div>
<script>
var parentComponent = {
template:"parent",
components:[childComponent],
methods:{
parentMe:function(d){
alert(d);
}
}
}
var childComponent = {
template:"child",
data:function(){
return {
infoData:"hello world"
}
},
methods:{
info:function(){
this.$emit("childInfo",this.infoData)
}
}
}
new Vue({
template:"#app",
components:[parentComponent]
})
</script>