小程序怎么推广_Vue.js中的组件体系

2021-01-07

Vue.js中的组件系统       这篇文章主要介绍了Vue.js之组件系统,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能。本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统。

Vue.js组件系统

每一个新技术的诞生,都是为了解决特定的问题。组件的出现就是为了解决页面布局等等一系列问题。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" 
 !--第二步,使用-- 
 ponent /ponent 
 /div 
 script 
 // 第一步,注册
 ponent("ponent", {
 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" 
 !--第二步,使用-- 
 ponent /ponent 
 /div 
 script 
 // 第一步,注册
 ponent("ponent", {
 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" 
 !--第二步,使用-- 
 ponent /ponent 
 ponent /ponent 
 ponent /ponent 
 /div 
 script 
 // 第一步,注册
 ponent("ponent", {
 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" 
 !--第二步,使用-- 
 ponent /ponent 
 ponent /ponent 
 ponent /ponent 
 /div 
 script 
 // 第一步,注册
 ponent("ponent", {
 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 

在局部组件中使用子组件

 !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: 
 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 

注:

1.注意写组件标签

2.每个组件的template只识别一个作用域块

通信

父子组件的通信

在父组件中给子组件绑定属性,子组件通过pro凡科抠图=["属性名称"]

 !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 
 pro凡科抠图: ['fdata']
 let Header = {
 template: ` div v-bind: 
 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 
 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 
 button v-on:click="myClick" 放大父组件字体 /button 
 /div 
 methods: {
 myClick: function () {
 console.log(this); this.$emit('change-font', 0.1);
 console.log(this);
 let Header = {
 template: ` div v-bind: 
 first-content v-on:change-font="changeFont" /first-content 
 span :style="{ fontSize: postFontSize + 'em' }" Hello Vue /span 
 /div 
 data() { return {
 count: 0,
 isBox: true,
 fathData: "我是你爸爸~~~",
 postFontSize: 1 }
 components: { 'first-content': Fcontent
 methods: {
 changeFont: function (value) { this.postFontSize += value;
 const VM = 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.js" /script 
 /head 
 body 
 div id="mixin-demo" 
 my-alex /my-alex 
 p /p 
 my-peiqi /my-peiqi 
 /div 
 script let mixs = {
 methods: {
 show: function (name) {
 console.log(`${name} is here!`);
 hide: function (name) {
 console.log(`${name} is gone!`);
 let myAlex = {
 template: ` div 
 button @click="show('alex')" 点我显示alex /button 
 button @click="hide('alex')" 点我隐藏alex /button 
 /div 
 mixins: [mixs],
 let myPeiqi = {
 template: ` div 
 button @mouseenter="show('peiqi')" 鼠标移入显示沛齐 /button 
 button @mouseleave="hide('peiqi')" 鼠标离开隐藏沛齐 /button 
 /div 
 mixins: [mixs],
 }; new Vue({
 el: "#mixin-demo",
 components: { "my-alex": myAlex, "my-peiqi": myPeiqi,
 }) /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 
 ponent('com-content', {
 template: ` div 
 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 
 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 事件抛出

写成代码之后是这样的:

ponent('custom-input', {
 pro凡科抠图: ['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 
 pro凡科抠图: ['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 会显示一个错误,ponent 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"

使用组件实现路飞导航栏

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title Title /title 
 script src="../statics/vue.min.js" /script 
 !-- 引入样式 -- 
 link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css" 
 !-- 引入组件库 -- 
 script src="element-ui/lib/index.js" /script 
 style body { margin: 0; padding: 0;
 } .header { position: fixed; top: 0; left: 0; width: 100%;
 } .el-menu { display: flex; align-items: center; justify-content: center;
 } .footer { position: fixed; bottom: 0; left: 0; width: 100%;
 } .header img { position: absolute; left: 80px; top: -4px; width: 118px; height: 70px; z-index: 999;
 /style 
 /head 
 body 
 div id="app" 
 /div 
 template id="header" 
 div 
 img src="static/img/head-logo.a7cedf3.svg"/ 
 el-menu :default-active="activeIndex" mode="horizontal" 
 el-menu-item index="1" 首页 /el-menu-item 
 el-menu-item index="2" 免费课程 /el-menu-item 
 el-menu-item index="3" 轻课 /el-menu-item 
 el-menu-item index="4" 学位课程 /el-menu-item 
 el-menu-item index="5" 智能题库 /el-menu-item 
 el-menu-item index="6" 公开课 /el-menu-item 
 el-menu-item index="7" 内部教材 /el-menu-item 
 el-menu-item index="8" 老男孩教育 /el-menu-item 
 /el-menu 
 /div 
 /template 
 template id="footer" 
 div 
 el-menu mode="horizontal" background-color="black" 
 el-menu-item index="1" 关于我们 /el-menu-item 
 el-menu-item index="2" 联系我们 /el-menu-item 
 el-menu-item index="3" 商业合作 /el-menu-item 
 el-menu-item index="4" 帮助中心 /el-menu-item 
 el-menu-item index="5" 意见反馈 /el-menu-item 
 el-menu-item index="6" 新手指南 /el-menu-item 
 /el-menu 
 /div 
 /template 
 script let pageHeader = {
 template: "#header",
 data() { return {
 activeIndex: "1",
 let pageFooter = {
 template: "#footer",
 let App = {
 template: ` div 
 div 
 page-header /page-header 
 /div 
 div 
 page-footer /page-footer 
 /div 
 /div 
 components: { 'page-header': pageHeader, 'page-footer': pageFooter,
 }; new Vue({
 el: "#app",
 template: ` app /app `,
 components: { 'app': App,
 }) /script 
 /body 
 /html 

效果图:

总结

以上所述是小编给大家介绍的Vue.js中的组件系统,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!




扫描二维码分享到微信

在线咨询
联系电话

400-888-8866