猿记录

一个记录、分享的博客

您的位置:主页 > 技术专栏 > javascript > vue >

vue 父子组件的通讯简单例子

2018-01-15 11:33:52 作者:yxl 次阅读 vue

vue 父子组件的通讯简单例子

1、父组件  Parent.vue


<template>
<div class="hello">
//如果我们需要在父组件中传递数据给子组件则 在组件上添加属性  比如: num  然后在子组件中使用props接收 props:['num']
<Componenta :num="num" @incre="increnment" @decre="decrement"></Componenta>
<p>{{ num }}</p>
</div>
</template>

<script>
import Componenta from './Component'
export default {
data () {
return {
num:15,
}
},
methods:{
increnment(){
this.num++;
},
decrement(){
this.num--;
}
},
components:{
Componenta
}
}
</script>
2、子组件  Component.vue

<template>
<div>
<button @click="increment">++</button>
<button @click="decrement">--</button>
<p class="c">{{ num }}</p>
</div>
</template>
<script>
export default {
//props接收父组件传递过来的数据
props:['num'],
data(){
return{
num:0,
}
},
methods:{
increment(){
//如果我们想在子组件中 给父组件通信,则使用 this.$emit('方法名')  这个方法名就是父组件中的自定义事件  incre
this.$emit('incre')
},
decrement(){
this.$emit('decre')
}
}
}
</script>

凡本站注明“本站”或“投稿”的所有文章,版权均属于本站或投稿人,未经本站授权不得转载、摘编或利用其它方式使用上述作品。

编辑:yxl 关键词: Vue
0

网友评论