父组件通过props将数据传递给子组件,
子组件通过触发父组件的绑定函数对父组件的数据进行操控
demo如下
父组件
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<counter v-bind:num = "num" @incre="increment" @decre="decrement"></counter>
<p>parent:{{num}}</p>
</div>
</template>
<script>
import counter from "./counter";
export default {
name: 'HelloWorld',
data () {
return {
num: 10,
msg: 'Welcome to Your Vue.js App'
}
},
components: {
counter
},
//子组件调用父组件的方法
methods: {
increment() {
this.num++;
},
decrement() {
this.num--;
}
}
}
</script>
子组件
<template>
<div>
<button @click = "increment">+</button>
<button @click = "decrement">-</button>
<p><span>{{num}}</span></p>
</div>
</template>
<style>
</style>
<script>
export default {
props:["num"],
data() {
return {
}
},
//子组件调用父组件的函数,通过emit()函数
methods:{
increment() {
this.$emit("incre");
},
decrement() {
this.$emit("decre");
}
}
}
</script>