<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<zujian :supertitle="title"></zujian>
<quanju></quanju>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var zujian={template:`<div id="zujian">局部組件{{supertitle}}</div>`,props:['supertitle'],data:function () {
return{num:0}
},methods:function () {
}}
Vue.component('quanju',{template:`<div id="quanju">全局組件</div>`,})
new Vue({
el:'#app',data:{title:'哈哈'},components:{zujian:zujian}
// template:`<div>{{title}}</div>`
// <div>{{title}}</div>
})
</script>
</html>
<!--根組件可以使用template模板建議掛載點-->
<!--每個組件template模板只能解析一個根標簽-->
<!--字組件數據自己提供-->
<!--組件不能綁定系統事件-->
<tag :super_msg="msg" @own_method="receiveInfo"></tag>
<p>{{ temp_info }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 父組件數據傳遞給子組件，通過自定義屬性綁定的方式
// 子組件數據傳遞給父組件，通過自定義事件的發送
Vue.component('tag', {
props: ['super_msg'],
template: `
<div>
<h2 @click="sendInfo">{{ super_msg }}</h2>
</div>
`,
data: function () {
return {
info: '子級的信息'
}
},
methods: {
sendInfo: function () {
this.$emit('own_method', this.info)
}
}
});
new Vue({
el: '#app',
data: {
msg: '父級的數據',
temp_info: ''
},
methods: {
receiveInfo: function (info) {
this.temp_info = info
}
}
})
