<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body >
<div id = 'app'>
<p>父组件的数据:{{a}}</p>
<p>子组件传递给父组件的数据:{{childData}}</p>
<input type="text" v-model="a">
<hr>
<br>
<my-component v-bind:parentdata='a' @my-event="getData"></my-component>
</div>
<template id='child'>
<div>
<p>父组件传递给子组件的数据:{{parentdata}}</p>
<p>子组件的数据: {{b}}</p>
<input type="text" v-model="b">
</div>
</template>
<script>
var vm = new Vue({
el:'#app',
data:{
a:'',
childData:'',
},
methods:{
getData:function(val){
this.childData = val;
}
},
components:{
'my-component':{
template:'#child',
props:['parentdata'],
data:function(){
return {
b:'',
};
},
watch:{
b:function(){
this.$emit('my-event',this.b);
}
}
}
}
});
</script>
</body>
</html>