Vue组件化开发
组件化开发思想
1.现实中的组件开发思想体现
2.编程中的组件化思想体现
3.组件化规范: Web Components
- 我们希望尽可能多的重用代码
- 自定义组件的方式不太容易 (html, css 和 js)
- 多次使用组件可能导致冲突
官网:https://developer.mozilla.org/zh-CN/docs/Web/Web_Components
组件注册
全局组件注册语法
组件用法
组件注册注意事项
1.data必须是一个函数
- 分析函数与普通对象的对比
2.组件模板内容必须是单个跟元素
- 分析演示实际的效果
3.组件模板内容可以是模板字符串
- 模板字符串需要浏览器提供支持(ES6语法)
4.组件命名方式
- 短横线方式
Vue.component('my-component', {/*...*/})
- 驼峰方式
Vue.component('MyComponent', {/*...*/})
注意: 如果使用驼峰命名组件, 那么在使用组件的时候, 只能在字符串模板中用驼峰的方式使用组件, 但是在普通的标签模板中, 必须使用短横线的方式使用组件
局部组件注册
var ComponentA = {
data: function() {
return {
msg: 'HelloWord'
}
},
template: '<div>{{ msg }}</div>'
},
var ComponentB = {/*...*/},
var ComponentC = {/*...*/}
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
'component-b': ComponentB,
'component-c': ComponentC
}
})
Vue 调试工具
调试工具安装
调试工具用法
组件间数据交互
父组件向子组件传值
1.组件内部通过props接收传递过来的值
Vue.component('menu-item', {
props: ['title'],
template: '<div>{{ title }}</div>'
})
2.父组件通过属性将值传递给子组件
<menu-item title="来自父组件的数据"></menu-item>
<menu-item :title="title"></menu-item>
3.props属性命名规则
- 在props中使用驼峰形式,模板中需要使用短横线的形式
- 字符串形式的模板中没有这个限制
Vue.component('menu-item', {
//在 JavaScript 中是驼峰式的
props: ['menuTitle'],
template: '<div>{{ menuTitle }}</div>'
})
<-- 在html中是短横线方式的 -->
<menu-item menu-title="nihao"></menu-item>
4.props属性值类型
- 字符串 String
- 数值 Number
- 布尔值 Boolean
- 数组 Array
- 对象 Object
子组件向父组件传值
1.子组件通过自定义事件向父组件传递信息
<button v-on:click='$emit("enlarge-text") '>扩大字体</button>
2.父组件监听子组件的事件
<menu-item v-on:enlarge-text='fontSize += 0.1'></menu-item>
3.子组件通过自定义事件向父组件传递信息
<button v-on:click='$emit("enlarge-text", 0.1) '>扩大字体</button>
4.父组件监听子组件的事件
<menu-item v-on:enlarge-text='fontSize += $event'></menu-item>
非父子组件间传值
1.单独的事件中心管理组件间的通信
var eventHub = new Vue()
2.监听事件与销毁事件
eventHub.$on('add-todo', addTodo)
eventHub.$off('add-todo')
3.触发事件
eventHub.$emit(‘add-todo', id)
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>父组件</div>
<div>
<button @click='handle'>销毁事件</button>
</div>
<test-tom></test-tom>
<test-jerry></test-jerry>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
兄弟组件之间数据传递
*/
// 提供事件中心
var hub = new Vue();
Vue.component('test-tom', {
data: function(){
return {
num: 0
}
},
template: `
<div>
<div>TOM:{{num}}</div>
<div>
<button @click='handle'>点击</button>
</div>
</div>
`,
methods: {
handle: function(){
hub.$emit('jerry-event', 2);
}
},
mounted: function() {
// 监听事件
hub.$on('tom-event', (val) => {
this.num += val;
});
}
});
Vue.component('test-jerry', {
data: function(){
return {
num: 0
}
},
template: `
<div>
<div>JERRY:{{num}}</div>
<div>
<button @click='handle'>点击</button>
</div>
</div>
`,
methods: {
handle: function(){
// 触发兄弟组件的事件
hub.$emit('tom-event', 1);
}
},
mounted: function() {
// 监听事件
hub.$on('jerry-event', (val) => {
this.num += val;
});
}
});
var vm = new Vue({
el: '#app',
data: {
},
methods: {
handle: function(){
hub.$off('tom-event');
hub.$off('jerry-event');
}
}
});
</script>
</body>
</html>
组件插槽的作用
组件插槽的作用
- 父组件向子组件传递内容
组件插槽基本用法
1.插槽位置
Vue.component('alert-box', {
template: `
<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>
`
})
2.插槽内容
<alert-box>Something bad happened.</alert-box>
具名插槽用法
作用域插槽
- 应用场景: 父组件对子组件的内容进行加工处理