<!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
}
}
})