1.子组件通过props接收父组件中的值，插入子组件中会跟随父组件而变化。（：x="num"）--->页面中插入{{x}}
2.如果只想变接收过来的值，而不改变父组件的，则吧接收过来的值存一下。（newx:this.x）--->页面中插入{{newx}}
3.子组件想修改父组件的值，需要添加事件，如下图中的“tap”，父组件中，在引入子组件的地方监听tap（@tap="callback"）
4.在父组件methds中写callback（）{}函数。进行值的改变，或者其他操作即可
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="../src/vue.js"></script>
</head>
<body>
<div id="app">
<h2>父组件中</h2>
<button @click="num=2">父组件中改变num</button>
<p>父组件中的num:{{num}}</p>
<childcom @tap="change" :x="num"></childcom>
</div>
<script>
// 一个组件另一个组件的模板中使用，就成为前一个组件为子组件，后一个为父组件。
Vue.component('childcom',{
props:["x"], // 接收传过来的x
data(){
return {
newx: this.x //把接受过来的x存起来，可以用来渲染和修改
}
},
template: `
<div>
<button @click="add">改变父组件的</button>
<p>子组件从父组件拿过来的x:{{x}}</p>
<p>子组件自己的newx:{{newx}}</p>
</div>
`,
methods:{
add(){
// 通知父组件，改变n的值， 子组件中发布事件出去
// tap 是自定义的事件名，将来父组件关心这个事件，就会监听这个事件
this.$emit('tap',99)
}
}
});
new Vue({
el: '#app',
data:{
num:1
},
methods:{
change(n){
this.num = n;
}
}
})
</script>
</body>
</html>