<body>
<script src="../libs/vue.js"></script>
<div id="app">
{{message}}
<button @click="message = 'hello Child'">修改父组件的数据</button>
<com
:cmessage='message'></com>
</div>
<!--单项数据流-->
<!--单项下行数据绑定-->
<!--父组件的数据更新，会流动到子组件中-->
<!--子组件修改数据，父组件不会改变-->
<!--处理-->
<!--props传递初始值，子组件需定义一个data里的数据，来接收props传递的数据，修改data里的数据-->
<template id="temp">
<div>
<h2>
子组件的内容{{msg}}
</h2>
<button @click="msg = 'hello parent'">修改子组件的数据</button>
</div>
</template>
<script>
Vue.component('com', {
template: '#temp',
props: ['cmessage'],
data(){
return {
msg:this.cmessage
}
}
})
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue',
},
})
</script>
</body>
网友评论