<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/Vue.js"></script>
<script>
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{
a:'我是父组件'
},
components:{
'chil-com':{
props:['msg'],
template:'#child',
methods:{
change(){
this.msg='被更改了'
}
}
}
}
});
}
</script>
</head>
<body>
<template id="child">
<div>
<H3>我是子组件</H3>
<input type="button" value="点击更新" @click="change">
<h3>{{msg}}</h3>
</div>
</template>
<div id="box">
父级:-》{{a}}
<br>
<chil-com :msg="a"></chil-com>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/Vue.js"></script>
<script>
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{
giveDate:{
a:'这是父组件'
}
},
components:{
'chil-com':{
props:['msg'],
template:'#child',
methods:{
change(){
this.msg.a='被更改了'
}
}
}
}
});
}
</script>
</head>
<body>
<template id="child">
<div>
<H3>我是子组件</H3>
<input type="button" value="点击更新" @click="change">
<h3>{{msg.a}}</h3>
</div>
</template>
<div id="box">
父级:-》{{giveDate.a}}
<br>
<chil-com :msg="giveDate"></chil-com>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/Vue.js"></script>
<script>
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{
a:'这是父组件'
},
components:{
'chil-com':{
data(){
return {
b:''
}
},
props:['msg'],
template:'#child',
mounted(){
this.b=this.msg;
},
methods:{
change(){
this.b='数据被更改了'
}
}
}
}
});
}
</script>
</head>
<body>
<template id="child">
<div>
<H3>我是子组件</H3>
<input type="button" value="点击更新" @click="change">
<h3>{{b}}</h3>
</div>
</template>
<div id="box">
父级:-》{{a}}
<br>
<chil-com :msg.sync="a"></chil-com>
</div>
</body>
</html>