Vue（二）
Vue 系列博客（二）
前言
本篇博客介绍 Vue 中的组件相关知识。
什么是组件？
- 每一个组件都是 Vue 实例；
- 每个组件均具有自身的模板 template，根组件的模板就是挂载点；
- 每个组件模板只能拥有一个根标签；
- 子组件的数据具有作用域，以达到组件的复用。
根组件
<div id="app">
<h1>
{{ msg }}
</h1>
</div>
<script type="text/javascript">
// 通过 new Vue 创建的实例就是根组件(实例与组件一一对应，一个实例就是一个组件)
// 每个组件均拥有模板 template
var app = new Vue({
el: '#app',
data: {
msg: '根组件'
},
// 模板: 由""包裹的 html 代码块，出现在组件的内部，赋值给组建的$template变量
// 显式书写模块，就会替换挂载点，但根组件必须拥有挂载点
template: "<div>显式模块</div>"
})
</script>
局部组件
<div id="app">
<local-tag></local-tag>
<local-tag></local-tag>
</div>
<script>
var localTag = {
data () {
return {
count: 0
}
},
template: '<button @click="btnAction">局部{{ count }}</button>',
methods: {
btnAction () {
this.count ++
}
}
}
new Vue({
el: "#app",
components: {
'local-tag': localTag
}
})
</script>
全局组件
<div id="app">
<global-tag></global-tag>
<global-tag></global-tag>
</div>
<script>
Vue.component('global-tag', {
data () {
return {
count: 0
}
},
template: '<button @click="btnAction">全局{{ count }}</button>',
methods: {
btnAction () {
this.count ++
}
}
})
new Vue({
el: "#app"
})
</script>
父子组件通信（通过绑定属性的方式进行数据传递）
<div id="app">
<global-tag :sup_data1='sup_data1' :supData2='sup_data2'></global-tag>
</div>
<script type="text/javascript">
Vue.component('global-tag', {
props:['sup_data1', 'supdata2'],
template: '<div>{{ sup_data1 }} {{ supdata2 }}</div>'
})
new Vue({
el: '#app',
data: {
sup_data1: '数据1',
sup_data2: '数据2'
}
})
</script>
子父组件通信（通过发送事件请求的方式进行数据传递）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子父通信</title>
</head>
<body>
<div id="app">
<balance></balance>
<!--<show></show>-->
</div>
</body>
<script src="../lib/Vue.js"></script>
<script>
Vue.component('balance', {
template: `
<div>
<show @show-balance="show_balance"></show>
<div v-if="show">
您的余额：￥好多钱
</div>
</div>
`,
methods: {
show_balance: function (data) {
console.log('data', data);
this.show = true;
}
},
data: function () {
return {
show: false
}
}
});
Vue.component('show', {
template: '<button @click="on_click()">显示余额</button>',
methods: {
on_click() {
this.$emit('show-balance', {'a': 1, 'b': 2})
}
}
});
var app = new Vue({
el: '#app',
data: {}
})
</script>
</html>
