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 ...
随机推荐
- 第二次作业社团UML图
第二次作业 UML图 用例图: 时序图: 申请加入社团 学生可以在页面投递社团加入申请,送交给社团管理员审批 社团活动审批 团委通过社团提交胡活动进行审批 评价活动 社团活动举行完,会有相应的团委和学 ...
- ZR#999
ZR#999 解法: 一道计数题,看到要求必须 $ m $ 个标号,所有标号至少出现一次的方案. 很容易想到可以容斥,但容斥这个东西是一种很神奇的东西,你可以看出来一道题需要容斥,但你就是不知道怎么容 ...
- docker 搭建registry
Docke官方提供了Docker Hub网站来作为一个公开的集中仓库.然而,本地访问Docker Hub速度往往很慢,并且很多时候我们需要一个本地的私有仓库只供网内使用.Docker仓库实际上提供两方 ...
- vue实现element-ui对话框可拖拽功能
element-ui对话框可拖拽及边界处理 应业务需求,需要实现对话框可拖拽问题,应element-ui没有提供官方支持,于是便参考大神的文章,得出了适合业务需要的解决方案.很多大神给出的代码是没有解 ...
- Vue中的动画效果
Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css ...
- NLP 文本预处理
1.不同类别文本量统计,类别不平衡差异 2.文本长度统计 3.文本处理,比如文本语料中简体与繁体共存,这会加大模型的学习难度.因此,他们对数据进行繁体转简体的处理. 同时,过滤掉了对分类没有任何作用的 ...
- 安卓P2P开源项目
https://github.com/LinYaoTian/P2PChat 一个基于局域网的 Android P2P 聊天系统 https://github.com/ddssingsong/webrt ...
- 如何在linux中测试i2c slave模式驱动的功能？
1. 硬件要求 1.1 需要两台机器,一台作为i2c master(记为M),另一台作为i2c slave(记为S) 1.2 使用杜邦线连接两台机器的i2c信号线 2. 使能内核选项CONFIG_I2 ...
- 安装TensorFlow时出现ERROR: Cannot uninstall 'wrapt'问题的解决方案
pip install -U --ignore-installed wrapt enum34 simplejson netaddr pip install -i https://pypi.tuna.t ...
- 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_14-认证接口开发-需求分析
4 认证接口开发 4.1 需求分析 用户登录的流程图如下: 执行流程: 1.用户登录,请求认证服务 2.认证服务认证通过,生成jwt令牌,将jwt令牌及相关信息写入Redis,并且将身份令牌写入coo ...