共计 3262 个字符，预计需要花费 9 分钟才能阅读完成。
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>
props 属性名规定
正文完