大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
Vue组件封装的过程
vue组件的定义
- 组件(Component)是Vue.js最强大的功能之一
- 组件可以扩展HTML元素,封装可重用代码
- 在较高层面上,组件是自定义元素,Vue.js的编译器为他添加特殊功能
- 某些情况下,组件也可以表现用 `js` 特性进行了扩展的原生的HTML元素
- 所有的Vue组件同时也都是Vue实例,所以可以接受 相同的选项对象(除了一些根级特有的选项),并提供 相同的生命周期钩子函数
vue组件的功能
- 能够把页面抽象成多个相对独立的模块
- 实现代码重用,提高开发效率和代码质量,使得代码易于维护
Vue组件封装过程
- 首先,使用Vue.extend()创建一个组件
- 然后,使用Vue.component()方法注册组件
- 接着,如果子组件需要数据,可以在props中接受定义
- 最后,子组件修改好数据之后,想把数据传递给父组件,可以使用emit()方法
组件使用流程详细介绍
1、组件创建—有3中方法,extend()
< template id=’’>
< script type=‘text/x-template’ id=’’>
- A、调用Vue.extend(),创建名为myCom的组件,template定义模板的标签,模板的内容需写在该标签下
-
var myCom = Vue.extend({ template: '<div>这是我的组件</div>' })
- B、标签创建,需要加上id属性
-
<template id="myCom"> <div>这是template标签构建的组件</div> </template>
C、< script type=‘text/x-template’ id=‘myCom’>,
需加id属性,同时还得加 type=“text/x-template”,
加这个是为了告诉浏览器不执行编译里面的代码<script type="text/x-template" id="myCom1"> <div>这是script标签构建的组件</div> </script>
2、注册组件—-有2中方法,全局注册,局部注册
- A1、全局注册:一次注册( 调用Vue.component( 组件名称,为组件创建时定义的变量 ) ),可在多个Vue实例中使用。
- 我们先用全局注册,注册上面例子中创建的myCom组件
Vue.component('my-com',myCom)
A2、全局注册语法糖:不需要创建直接注册的写法
Vue.component('my-com',{ 'template':'<div>这是我的组件</div>' })
‘my-com’为给组件自定义的名字,在使用时会用到,后面myCom对应的就是上面构建的组件变量。
A3、如果是用template及script标签构建的组件,第二个参数就改为它们标签上的id值
Vue.component('my-com',{ template: '#myCom' })
B1、局部注册:只能在注册该组件的实例中使用,一处注册,一处使用
var app = new Vue({ el: '#app', components: { 'my-com': myCom } })
B2、局部注册语法糖:
var app = new Vue({ el: '#app', components: { 'my-com': { template: '<div>这是我的组件</div>' } } })
B3、< template>及< script>创建的组件,局部注册
var app = new Vue({ el: '#app', components: { 'my-com': { template: '#myCom' } } })
3、调用组件
只需要在调用组件的地方,写上组件名字的标签即可
<div> /*调用组件*/ <my-com></my-com> </div>
案例:
A、全局注册:新建一个html文件,引入vue.js,并且定义2个vue实例app1和app2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue组件</title> <script src="vue.js"></script> </head> <body> <div id="app1"> <my-com></my-com> </div> <div id="app2"> <my-com></my-com> </div> <script> /*创建组件*/ var myCom = Vue.extend({ template: '<div>这是我的组件</div>' }); /*全局注册组件*/ Vue.component('my-com',myCom); /*定义vue实例app1*/ var app1 = new Vue({ el: '#app1' }); /*定义vue实例app2*/ var app2 = new Vue({ el: '#app2' }); </script> </body> </html>
显示效果:
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/190083.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...