父组件:

<template>
<div class="hello">
<h1>{{ msg }}</h1>
<counter v-bind:num="num" v-on:incre="increment" v-on:decre="decrement"></counter>
<p>parent:{{num}}</p>


</div>
</template>

<script>

import Counter from './Counter'

export default {
name: 'HelloWorld',
components: {Counter},
data () {
return {
num:108,
msg: 'Welcome to Your Vue.js App'
}
},
Components:{
Counter
},
methods:{
increment(){
this.num++;
},
decrement(){
this.num--;
}
}

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>



子组件:

<template>
<div>
<button @click="increment">+</button>
<button @click="decrement">-</button>
<p><span>{{num}}</span></p>
</div>
</template>

<script>
export default {
props:['num'],
name: "Counter",
data(){
return {
num:0
}
},
methods:{
increment(){
this.$emit('incre');
},
decrement(){
this.$emit("decre");
}
}
}
</script>

<style scoped>

</style>
本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自低调揭秘,原文地址《vue的父组件和子组件的数据传递
暧昧文章:
上一篇:
Leave a Reply


最近评论
  • wanglijun: 22
Copyright © 低调揭秘 冀ICP备15025246号-1 版权声明 免责条款 隐私政策 合作互助 关于我们