Vue 组件系统
vue.js既然是框架，那就不能只是简单的完成数据模板引擎的任务，它还提供了页面布局的功能。本文详细介绍使用vue.js进行页面布局的强大工具，vue.js组件系统。
每一个新技术的诞生，都是为了解决特定的问题。组件的出现就是为了解决页面布局等等一系列问题。vue中的组件分为两种，全局组件和局部组件。
一、全局组件的注册
通过Vue.component()创建一个全局组件之后，我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--第二步，使用-->
<global_component></global_component>
</div>
<script>
// 第一步，注册
Vue.component("global_component", {
template: `
<div>
<h2>Hello Vue</h2>
</div>
`
});
new Vue({
el: "#app",
});
</script>
</body>
</html>
组件的参数
因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el这样根实例特有的选项。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--第二步，使用-->
<global_component></global_component>
</div>
<script>
// 第一步，注册
Vue.component("global_component", {
data: function () {
return {
count: 0
}
},
template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
});
new Vue({
el: "#app",
});
</script>
</body>
</html>
组件的复用
每个实例维护自己的一份独立的数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--第二步，使用-->
<global_component></global_component>
<global_component></global_component>
<global_component></global_component>
</div>
<script>
// 第一步，注册
Vue.component("global_component", {
data: function () {
return {
count: 0
}
},
template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
});
new Vue({
el: "#app",
});
</script>
</body>
</html>
注意当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。
Data必须是一个函数
data必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝, 也可以写成如下形式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--第二步，使用-->
<global_component></global_component>
<global_component></global_component>
<global_component></global_component>
</div>
<script>
// 第一步，注册
Vue.component("global_component", {
data(){
return {
count: 0
}
},
template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
});
new Vue({
el: "#app",
});
</script>
</body>
</html>
二、局部组件的注册
全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。
全局组件始终是存在的，除非程序结束，如果组件越来越大，那么程序所占用的空间和消耗的性能就会更大。
局部组件的第一种使用方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body>
<div id="component-demo">
<!--最后在根元素当中使用它-->
<!--第一种使用方式，会把当前div渲染进DOM-->
<my-header></my-header>
</div>
<script>
// 定义一个局部组件，其实就是一个变量，它是一个object类型
// 属性与全局组件是一样的
let Header = {
template: `
<button @click="count++">{{ count }}</button>
`,
data() {
return {
count: 0
}
}
};
new Vue({
el: "#component-demo",
// 第二部，需要在根实例当中使用它
components: {
'my-header': Header
}
});
</script>
</body>
</html>
局部组件的第二种使用方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body>
<div id="component-demo">
</div>
<script>
// 定义一个局部组件，其实就是一个变量，它是一个object类型
// 属性与全局组件是一样的
let Header = {
template: `
<button @click="count++">{{ count }}</button>
`,
data() {
return {
count: 0
}
}
};
new Vue({
el: "#component-demo",
// 第二种使用方式，不会将div渲染进DOM，以template为根元素
template: `<my-header></my-header>`,
// 第二步，需要在根实例当中使用它
components: {
'my-header': Header
}
});
</script>
</body>
</html>
对于 components 对象中的每个属性来说，其属性名就是自定义元素的名字，其属性值就是这个组件的选项对象。
在局部组件中使用子组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<style>
body {
margin: 0;
}
.box {
width: 100%;
height: 50px;
background-color: #2aabd2;
}
</style>
</head>
<body>
<div id="component-demo">
</div>
<script>
// 定义一个局部组件，其实就是一个变量，它是一个object类型
// 这个对象的属性与全局组件是一样的(除el属性外)
let Fcontent = {
template: `
<div>
<span>这是头条</span>
</div>
`
};
let Header = {
template: `
<div v-bind:class='{box: isBox}'>
<button @click="count++">{{ count }}</button>
<first-content></first-content>
</div>
`,
data() {
return {
count: 0,
isBox: true
}
},
components: {
'first-content': Fcontent
}
};
new Vue({
el: "#component-demo",
// 第二种使用方式，不会将div渲染进DOM，以template为根元素
template: `<my-header></my-header>`,
// 第二步，需要在根实例当中使用它
components: {
'my-header': Header
}
});
</script>
</body>
</html>
三、父子组件的通信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<style>
body {
margin: 0;
}
.box {
width: 100%;
height: 50px;
background-color: #2aabd2;
}
</style>
</head>
<body>
<div id="component-demo">
</div>
<script>
// 定义一个局部组件，其实就是一个变量，它是一个object类型
// 属性与全局组件是一样的
let Fcontent = {
template: `
<div>
<span>这是头条</span>
{{ fdata }}
</div>
`,
props: ['fdata']
};
let Header = {
template: `
<div v-bind:class='{box: isBox}'>
<button @click="count++">{{ count }}</button>
<first-content :fdata="fathData"></first-content>
</div>
`,
data() {
return {
count: 0,
isBox: true,
fathData: "我是你爸爸~~~"
}
},
components: {
'first-content': Fcontent
}
};
new Vue({
el: "#component-demo",
// 第二种使用方式，不会将div渲染进DOM，以template为根元素
template: `<my-header></my-header>`,
// 第二步，需要在根实例当中使用它
components: {
'my-header': Header
}
});
</script>
</body>
</html>
四、子父之间的通信
父组件在mounted的时候，监听一个自定义事件。
给子组件绑定一个click事件之后，通过内建的方法$emit在父组件上触发一个事件，这个事件就是父组件监听的自定义事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
let myFooter = {
template: `
<div>
<h1>我是儿子</h1>
<button v-on:click="changeFatherSize">点击修改爸爸的字体</button>
</div>
`,
methods: {
changeFatherSize: function () {
this.$emit('change-font', 1);
}
},
};
let myHeader = {
template: `
<div>
<my-footer v-on:change-font="changeSize"></my-footer>
<span :style="{ fontSize: fontSize + 'px'}">我是爸爸</span>
</div>
`,
data(){
return {
fontSize: 26,
}
},
methods: {
changeSize: function (value) {
console.log(value);
this.fontSize += value;
}
},
components: {
'my-footer': myFooter
}
};
let App = {
template: `
<div>
<my-header></my-header>
</div>
`,
components: {
'my-header': myHeader,
},
};
new Vue({
el: "#app",
template: `<App></App>`,
components: {
App
}
})
</script>
</body>
</html>
五、平行组件之间的通信
平行组件之间可以通过一个中间Vue实例来进行通信。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body>
<div id="app">
<com-main></com-main>
</div>
<script>
let bus = new Vue();
let dogfa = {
template: `
<div>
<button @click="dogfaClick">点击向djb道歉</button>
</div>
`,
methods: {
dogfaClick: function () {
bus.$emit("dogfa_apo", "原谅我吧，请你大保健~~~");
}
},
};
let djb = {
template: `
<div v-show="isShow">原谅你了~~~</div>
`,
mounted () {
bus.$on("dogfa_apo", (dogfasay)=> {
if ( dogfasay ) {
console.log("原谅你了~~~");
}
});
},
data () {
return {
isShow: false
};
}
};
let App = {
template: `
<div id="app">
<dogfa></dogfa>
<djb></djb>
</div>
`,
components: {
dogfa,
djb
}
};
new Vue({
el: "#app",
template: '<App></App>',
components: {
App
},
})
</script>
</body>
</html>
六、混入
混入可以提高代码的重用性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
let mixins = {
methods: {
show: function (name) {
console.log(`${name} is here`);
},
hide: function (name) {
console.log(`${name} is here`);
}
}
};
let myAlex = {
template: `
<div>
<button @click="show('alex')">点我显示alex</button>
<button @click="hide('alex')">点我隐藏alex</button>
</div>
`,
mixins: [mixins]
};
let myPeiQi = {
template: `
<div>
<button @click="show('peiqi')">点我显示peiqi</button>
<button @click="hide('peiqi')">点我隐藏peiqi</button>
</div>
`,
mixins: [mixins],
};
let App = {
template: `
<div>
<my-alex></my-alex>
<my-peiqi></my-peiqi>
</div>
`,
components: {
'my-alex': myAlex,
'my-peiqi': myPeiQi,
},
};
new Vue({
el: "#app",
template: `<App></App>`,
components: {
App
}
})
</script>
</body>
</html>
七、插槽
有时候我们需要向组件传递一些数据，这时候可以使用插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.nav-link {
width: 100px;
height: 100px;
background-color: #2aabd2;
float: left;
margin-left: 5px;
text-align: center;
line-height: 100px;
}
</style>
<script src="../statics/vue.js"></script>
</head>
<body>
<div id="app01">
<com-content>登录</com-content>
<com-content>注册</com-content>
<com-content>最热</com-content>
<com-content>段子</com-content>
<com-content>42区</com-content>
<com-content>图片</com-content>
</div>
<script>
Vue.component('com-content', {
template: `
<div class="nav-link">
<slot></slot>
</div>
`
});
new Vue({
el: "#app01",
})
</script>
</body>
</html>
八、具名插槽
操作使用了组件的复用，如果我们在同一个组件内写入不同的页面呢？此时，我们需要多个插槽，并且给不同的内容命名。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.nav-link {
width: 100px;
height: 100px;
background-color: #2aabd2;
float: left;
margin-left: 5px;
text-align: center;
line-height: 100px;
}
</style>
<script src="../statics/vue.js"></script>
</head>
<body>
<div id="app01">
<base-layout>
<template slot="header">
<h1>这是标题栏</h1>
</template>
<template>
<h2>这是内容</h2>
</template>
<template slot="footer">
<h3>这是页脚</h3>
</template>
</base-layout>
</div>
<script>
let baseLayout = {
template: `
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main><slot></slot></main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
`
};
new Vue({
el: "#app01",
components: {
"base-layout": baseLayout
}
})
</script>
</body>
</html>
我们还是可以保留一个未命名插槽，这个插槽是默认插槽，也就是说它会作为所有未匹配到插槽的内容的统一出口。
九、在组件上使用v-model
自定义事件也可以用于创建支持 v-model 的自定义输入组件。记住：
`<input v-model="searchText">`
等价于：
<input
v-bind:value="searchText"
v-on:input="searchText = $event.target.value"
>
当用在组件上时，v-model 则会这样：
<custom-input
v-bind:value="searchText"
v-on:input="searchText = $event"
></custom-input>
为了让它正常工作，这个组件内的 <input> 必须：
将其 value 特性绑定到一个名叫 value 的 prop 上
在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出
写成代码之后是这样的：
Vue.component('custom-input', {
props: ['value'],
template: `
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
`
})
现在 v-model 就应该可以在这个组件上完美地工作起来了：
<custom-input v-model="searchText"></custom-input>
如下是在组件中使用v-model示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
let Model = {
template: `
<div>
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
/>
<h1>{{ value }}</h1>
`,
props: ['value']
};
let App = {
template: `
<div>
<custom-input v-model="searchText"></custom-input>
`,
components: {
'custom-input': Model,
},
data(){
return {
searchText: "",
}
}
};
new Vue({
el: "#app",
template: `<App></App>`,
components: {
App,
}
})
</script>
</body>
</html>
十、使用组件的注意事项
注意事项一：单个根元素
当构建一个内容页面的组件时，我们的组件可能包含多个HTML标签。
<h1>Hello World</h1>
<h2>Hello Vue</h2>
然而如果你在模板中尝试这样写，Vue 会显示一个错误，并解释道 every component must have a single root element (每个组件必须只有一个根元素)。你可以将模板的内容包裹在一个父元素内，来修复这个问题，例如：
<div>
<h1>Hello World</h1>
<h2>Hello Vue</h2>
</div>
注意事项二：解析特殊HTML元素
有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。
这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：
<table>
<blog-post-row></blog-post-row>
</table>
这个自定义组件 <blog-post-row> 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法：
<table>
<tr is="blog-post-row"></tr>
</table>
需要注意的是如果我们从以下来源使用模板的话，这条限制是不存在的：
字符串 (例如：template: '...')
单文件组件 (.vue)
<script type="text/x-template">
Vue 组件系统的更多相关文章
- vue组件系统
1. 全局组件的注册 <body> <div id="app"> <!--<global-component>< ...
- 【Vue组件系统】
目录 全局组件 局部组件 注册 子组件的用法 父子组件的通讯 子父组件的通讯 非父子组件的通讯 混入 插槽 具名插槽 使用组件的注意事项 使用组件实现导航栏 "vue.js既然是框架,那就不 ...
- 【Vue】详解Vue组件系统
Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...
- Vue框架之组件系统
1,Vue组件系统之全局组件 1.1Vue全局组件的在实例化调用Vue的模板中导入组件的名称 <!DOCTYPE html> <html lang="zh-cn" ...
- Vue.js之组件系统
vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能.本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统. Vue.js组件系统 每一个新技 ...
- vue学习之四组件系统
vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能.本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统. 一.Vue.js组件系统 每一个 ...
- JS组件系列——又一款MVVM组件：Vue（二：构建自己的Vue组件）
前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...
- canvas实现倒计时效果示例（vue组件内编写）
前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...
- 一套代码小程序&Web&Native运行的探索06——组件系统
接上文:一套代码小程序&Web&Native运行的探索05——snabbdom 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tre ...
随机推荐
- CSS绘制三角形—border法
1. 实现一个简单的三角形 使用CSS盒模型中的border(边框)即可实现如下所示的三角形: CSS实现简单三角形 实现原理: 首先来看在为元素添加border时,border的样子:假设有如下 ...
- ICEM rpl文件简要讲解【转载】
转载自:http://blog.sina.com.cn/s/blog_90affd9801016xti.html 很多人问ICEM的rpl怎样录制的问题,为什么CFX调用时老是报错,这里开个帖子简单讲 ...
- Alpha项目冲刺！ Day2-产出
各个成员今日完成的任务 林恩:任务分工,博客撰写,设计设置等模块 杨长元:学习安卓本地数据库建立 李震:如何写登录界面登录页面,如何下载模板 胡彤:连接服务端 寇永明:提供页面 王浩:提供页面 李杰: ...
- html中的lang标记有什么用
html中的lang标记有什么用 一.总结 一句话总结: 为文档或元素设定主语言(即lang) 比如google浏览器有个自动翻译的功能,而自动翻译要看这个文档的语言 1.其它标签中设置lang属性? ...
- arcgis 地理坐标系 699个，投影坐标系是4767
import arcpy # Get the list of spatial references and print it. srs = arcpy.ListSpatialReferences(sp ...
- element ui组件的开始时间-结束时间验证
<el-date-picker v-model="seach.before" type="date" placeholder="开始时间&quo ...
- [C#]加密解密 MD5、AES
/// <summary> /// MD5函数 /// </summary> /// <param name="str">原始字符串</p ...
- Spring Boot属性配置&自定义属性配置
一.修改默认配置 例1.spring boot 开发web应用的时候,默认tomcat的启动端口为8080,如果需要修改默认的端口,则需要在application.properties 添加以下记录: ...
- python中关于shutdown 和closesocket的彻底理解！
关于shutdown 和closesocket的彻底理解! shutdown 和closesocket 来,咱们彻底的来讨论一下这个shutdown 和closesocket 从函数调用上来分析(ms ...
- LeetCode_122. Best Time to Buy and Sell Stock II
122. Best Time to Buy and Sell Stock II Easy Say you have an array for which the ith element is the ...