父组件向子组件传值
父组件向子组件传值简单,直接在父组件中引用子组件时将数据绑定在子组件中,并在子组件的props属性中接收即可。
以下是父组件,其中<keep-alive>
标签表示子组件,将created
阶段获取的值singerData
保存到vue
的data()
中,并在子组件中通过v-bind:singerData="singerData"
传递给子组件,这里简写:singerData="singerData"
。
<template>
<div id="abc">
<div class="nav">
<div class="tab-item">
<router-link to="/first">first</router-link>
</div>
<div class="tab-item">
<router-link to="/second">second</router-link>
</div>
</div>
<keep-alive>
<router-view :singerData="singerData"></router-view>
</keep-alive>
</div>
</template>
<script>
export default {
data() {
return singerData:{}
}
},
created(){
var that = this;
this.$http.get('http://localhost:8081/data.json').then(function (res) {
that.singerData = res.body;
});
}
</script>
从子组件接收,通过methods
中的方法showSomething
验证。
<script type="text/ecmascript-6">
export default {
props: {
singerData: {
type: Object
}
},
methods: {
showSomething() {
alert(this.singerData.singer2.song1.name);
}
}
}
</script>
子组件向父组件传值
子组件向父组件传值较麻烦,一般情况下,子组件发生点击事件时将某值传递到父组件,此时可给子组件绑定自定义事件A
,并在此事件中触发父组件的B
方法。
下面是子组件:
<template>
<div>
<p @click="sendToParent">deliver data to parent </p>
</div>
</template>
<script type="text/ecmascript-6">
export default {
methods: {
sendToParent() {
this.$emit('receiveFromChild','I am data from Child');
}
}
}
</script>
父组件通过绑定的方法接收子组件传来的值:
<template>
<div id="abc">
<div class="nav">
<div class="tab-item">
<router-link to="/first">first</router-link>
</div>
<div class="tab-item">
<router-link to="/second">second</router-link>
</div>
</div>
<keep-alive>
<router-view :singerData="singerData" @receiveFromChild="showChildMessage"></router-view>
</keep-alive>
</div>
</template>
<script>
export default {
methods:{
showChildMessage(data){
alert(data);
}
}
}
</script>