在vue中实现修改子组件的数据，父组件的数据也跟着变化

在vue中如果在不使用vuex的情况下，实现子组件给父组件传参方法如下：

html代码：

<div id="app">
			{{num}}
			<v-header :a='num'></v-header>
			<!-- <button type="button" @click="change()">按钮</button> -->
		</div>
		<template id="header">
			<div >
				<h1>头部{{a}}</h1>
				<button type="button" @click="change()">按钮</button>
			</div>
		</template>

js代码：

var header={
				template:'#header',
				data(){
					return {
						msg:'子组件数据'
					}
				},
				
				props:['a'],
				methods:{
					change(){
						this.a.q+=2
					}
				}
			}
			new Vue({
				el:'#app',
				data:{
					num:{
						q:'父组件数据'
					}
				},
				components:{
					'v-header':header
				},
           })