vue父子组件互相关联（之一）

父组件通过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>