Vue组件化开发
- 组件化开发思想
- 组件祖册
- Vue调试工具用法
- 组件间数据交互
- 组件插槽
- 基于组件的案例
组件化的开发思想
编程中的组件化开发思想
一个组件就是一个功能，多个组件组成一个完整的APP，抽取一个组件并不会影响其它组件的运行。
组件化规范: Web Components
官网：https://developer.mozilla.org...
组件的注册
组件的注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue组件的使用</title>
</head>
<body>
<div id="app">
<button-count></button-count>
<button-count></button-count>
<button-count></button-count>
<button-count></button-count>
</div>
</body>
<script src="../vue.js"></script>
<script>
Vue.component('button-count', {
data() {
return {
count: '0',
}
},
template: `<button @click='count++'>点击{{count}}次</button>`
})
let vm = new Vue({
el: "#app",
data: {
}
})
</script>
</html>
Vue组件注册之注意事项
注意事项
- dta必须是一个函数
- 组件模板内容必须是单个根元素
- 组件模板内容可以是模板字符串（ES6语法）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue组件的注意事项</title>
</head>
<body>
<div id="app">
<button-count></button-count>
<button-count></button-count>
<button-count></button-count>
<button-count></button-count>
</div>
</body>
<script src="../vue.js"></script>
<script>
Vue.component('button-count', {
//data必须是一个函数
data() {
return {
count: '0',
}
},
//组件模板的内容必须是单个根元素 且可以使用模板字符串语法
template: `
<div>
<button @click='count++'>点击{{count}}次</button>
<button>按钮</button>
</div>
`
})
let vm = new Vue({
el: "#app",
data: {
}
})
</script>
</html>
组件的命名方式
注意事项
- 驼峰方式的命名能在组件注册的字符串模板中使用，但不能在标签中的模板字符串使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue组件的命名</title>
</head>
<body>
<div id="app">
<button-count></button-count>
<button-count></button-count>
<button-count></button-count>
<button-count></button-count>
<myComponent></myComponent>
</div>
</body>
<script src="../vue.js"></script>
<script>
Vue.component('myComponent', {
data() {
return {
msg: 'hello Word'
}
},
template: `<div>{{msg}}</div>`
})
Vue.component('button-count', {
//data必须是一个函数
data() {
return {
count: '0',
}
},
// 采用驼峰式命名的方式可以在组件定义中的模板字符串使用
template: `
<div>
<button @click='count++'>点击{{count}}次</button>
<button>按钮</button>
<myComponent></myComponent>
</div>
`
})
let vm = new Vue({
el: "#app",
data: {
}
})
</script>
</html>
Vue之局部自定义组件
使用components属性可以局部自定义组件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<hello-word></hello-word>
<hello-vue></hello-Vue>
</div>
</body>
<script src='../vue.js'></script>
<script>
let helloWord = {
data() {
return {
msg: 'hello Word'
}
},
template: `<div>{{msg}}</div>`
};
let helloVue = {
data() {
return {
msg: 'hello Vue'
}
},
template: `<div>{{msg}}</div>`
};
let vm = new Vue({
el: "#app",
data() {
return {
}
},
// 局部自定义组件
components: {
'hello-word': helloWord,
'hello-vue': helloVue
}
})
</script>
</html>
Vue之调试工具的使用
组件间数据交互
子组件向父组件传递数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{value}}</div>
<menu-item v-bind:title='title' v-bind:value='value'></menu-item>
</div>
</body>
<script src="../vue.js"></script>
<script>
// 子组件向父组件传值的基本使用
Vue.component('menu-item', {
props: ['title', 'value'],
data() {
return {
msg: "子组件本身的内容"
}
},
template: `<div>{{msg +'---'+title+'---'+value}}</div>`
})
let vm = new Vue({
el: "#app",
data() {
return {
value: "父组件的内容",
title: '动态绑定属性'
}
},
})
</script>
</html>
