vue自己封装组件 vue项目中,vue封装组件方法
本文主要介绍js版vue包组件的基本步骤。有需要的朋友可以借鉴一下，希望能有所帮助。祝大家进步很大，早日升职加薪。
目录
什么是组件化：Vue的组件化思想一、注册组件的基本步骤1。创建组件生成器c-input2。注册组件3。使用父组件2。浓缩成分3。父组件和子组件之间的通信。亲子沟通【道具倒】2。从子代到父代传递值[Events Up]3如何使用插槽？名为插槽作用域插槽的默认插槽
什么是组件化：
组件化就是把一个页面拆分成小的功能模块，每个功能模块完成自己独立的功能，使得整个页面的管理和维护变得非常容易。
Vue组件化思想
组件化是Vue中的一个重要思想。当我们对vue有了一定的基础知识，我们就开始封装组件。它提供了一种抽象，允许我们开发独立的、可重用的小组件来构建我们的应用程序。组件树。
组件化思想的应用1。在项目中充分利用组件化思想。
2.尽可能将页面分割成小的可重用组件。
3.好处：代码更便于组织管理，扩展性更强。
一.注册组件的基本步骤
我们以一个封装了元素Ui的输入框组件为例来实现全文。
组件的使用分为三步。
1.创建组件构造器c-input
模板组件的模板
注意：只能有一个根元素，否则会给出警告。
1模板可以是文字字符串，但缺点是没有突出显示，而且是JavaScript内置的，写起来比较麻烦。
2模板可以用脚本标签写，虽然解决了高亮的问题，但是也比较麻烦。
3以上方法都不好。我们最终的解决方案是使用Vue的。要编写的单个文件组件。(网络包)
但是为了使用这种方法，必须结合一些构建工具。
模板
el输入
/el-input
/模板
2.注册组件
组件的注册分为局部注册和全局注册，这将在下一章讨论。
.使用代码..
从“组件地址/c-ipunt.vue”导入；
导出默认值{
组件：{ c输入}，
.
3.父组件使用
模板
c-ipunt/
/模板
脚本
从“组件地址/c-ipunt.vue”导入；
导出默认值{
组件：{ c输入}，
.
/脚本
二.丰富组件
组件是独立的作用域，就像我们节点中的JavaScript模块一样，是独立的。
事实上，组件是Vue的一个特殊实例，它可以有自己的数据、方法、计算、观察和其他选项。
组件的数据必须是函数。
该函数返回一个对象作为组件的数据。
模板
el输入
/el-input
/模板
脚本
导出默认值{
名称：“c输入”，
型号：{
属性：“值”，
事件：“输入”，
},
道具：{
},
data() {
返回{
}
},
观察：{
},
方法：{
},
已安装(){
},
}
/脚本
样式范围
/风格
三.父子组件间的通讯
1.父----子通信 [props Down]
父组件通过props将数据向下传递给子组件。
因此，子组件必须定义接收到的参数。
我们可以看到元素Ui的输入框组件，用它我们可以重新定义封装。
模板
El-input:disabled= disabled ref= input :placeholder= placeholder
:type= type :auto-complete= autocomplete
/el-input
/模板
脚本
导出默认值{
名称：“c输入”，
型号：{
属性：“值”，
事件：“输入”，
},
道具：{
标签宽度：{
类型：字符串，
默认：未定义，
},
自动调整大小：{
默认(){
如果不使用该属性的默认值，则返回{minRows: 2，maxRows: 4 }//值
},
},
输入类别：{
类型：字符串，
默认值： ，
},
标签:{
类型：字符串，
默认值： ，
},
值：{
默认：未定义，
},
道具：{
类型：字符串，
默认值：null，
},
占位符：{
类型：字符串，
默认：未定义，
},
必需的：{
类型：布尔型，
默认值：假的，
},
宽度：{
类型：字符串，
},
类型：{
类型：字符串，
默认：未定义，
},
自动完成：{
类型：字符串，
默认值："开",
},
已禁用：{
类型：布尔型，
默认值：假的，
},
跨度：{
类型：数量，
},
},
data() {
返回{
}
},
观察：{
},
方法：{
},
已安装(){
},
}
/脚本
样式范围
/风格
父组件使用
模板
c-输入标签=用户名：span=12 /
/模板
脚本
从导入输入组件地址/c-我踢。vue ；
导出默认值{
组件：{ c输入},
.
/脚本
2. 子---- 父传值 [Events Up]
子组件通过事件给父组件发送消息，实际上就是子组件把自己的数据发送到父组件。
在元素用户界面的埃尔输入中是有@输入。native= updateValue(event。目标。值)’获取现在输入值@ keyup。进入。native= handle enter 回车@focus=focus 得到焦点等事件的
模板
El-input:disabled= disabled ref= input :placeholder= placeholder
:type= type :auto-complete= autocomplete @ input。native= updateValue(event。目标。value) @ keyup。进入。native= handle enter @ focus= focus
/el-input
/模板
脚本
导出默认值{
名称：" c输入",
型号：{
属性："值",
事件："输入",
},
道具：{
标签宽度：{
类型：字符串，
默认：未定义，
},
自动调整大小：{
默认(){
return { minRows: 2，maxRows: 4 }//如果不使用这个属性的默认值
},
},
输入类别：{
类型：字符串，
默认值： ,
},
标签:{
类型：字符串，
默认值： ,
},
值：{
默认：未定义，
},
道具：{
类型：字符串，
默认值：null，
},
占位符：{
类型：字符串，
默认：未定义，
},
必需的：{
类型：布尔型，
默认值：假的，
},
宽度：{
类型：字符串，
},
类型：{
类型：字符串，
默认：未定义，
},
自动完成：{
类型：字符串，
默认值："开",
},
已禁用：{
类型：布尔型，
默认值：假的，
},
跨度：{
类型：数量，
},
},
data() {
返回{
}
},
观察：{
},
方法：{
更新值(瓦尔){
这个emit(input ，val)
},
handleEnter() {
这个emit(keyup-enter )
},
焦点(){
这个$emit(焦点)
},
},
已安装(){
},
}
/脚本
样式范围
/风格
父组件使用
模板
c-输入标签=用户名：span= 12 @ keyup-enter= my keyu penter @ focus= my focus /
/模板
脚本
从导入输入组件地址/c-我踢。vue ；
导出默认值{
组件：{ c输入},
.
方法：{
mykeyupEnter(){
console.log(我是父组件的输入框回车)},
myfocus(){
console.log(我是父组件的输入框得到焦点)
}
},
.
/脚本
3. 子---- 父 双向传值
我们知道某视频剪辑软件的核心特性之一是双向绑定，
v型车是一个指令用来实现双向绑定，限制在输入、选择、文本区、组件中使用，修饰符。懒惰（取代投入监听变化事件)、号码（输入字符串转为有效的数字)、修剪（输入首尾空格过滤)。那么我们封装的组件怎么进行双向绑定呢。
首先小道具添加一个值，接收父组件的数据变化。再添加一个价值的监听，监听父组件的数据变化。而子组件数据变化的时候会出发这个事件@input.native= ，所以这个时间触发这个. emit(input ，val)，向父组件传递子组件的数据变化模板
El-input:disabled= disabled ref= input :placeholder= placeholder
:type= type :auto-complete= autocomplete @ input。native= updateValue(event。目标。value) @ keyup。进入。native= handle enter @ focus= focus v-model= model value
/el-input
/模板
脚本
导出默认值{
名称：" c输入",
型号：{
属性："值",
事件："输入",
},
道具：{
标签宽度：{
类型：字符串，
默认：未定义，
},
自动调整大小：{
默认(){
return { minRows: 2，maxRows: 4 }//如果不使用这个属性的默认值
},
},
输入类别：{
类型：字符串，
默认值： ,
},
标签:{
类型：字符串，
默认值： ,
},
值：{
默认：未定义，
},
道具：{
类型：字符串，
默认值：null，
},
占位符：{
类型：字符串，
默认：未定义，
},
必需的：{
类型：布尔型，
默认值：假的，
},
宽度：{
类型：字符串，
},
类型：{
类型：字符串，
默认：未定义，
},
自动完成：{
类型：字符串，
默认值："开",
},
已禁用：{
类型：布尔型，
默认值：假的，
},
跨度：{
类型：数量，
},
},
data() {
返回{
模型值：未定义，
}
},
观察：{
值：{
处理程序（新值){
this.modelValue=newValue
},
即时：真的，
},
},
方法：{
更新值(瓦尔){
这个emit(input ，val)
},
handleEnter() {
这个emit(keyup-enter )
},
焦点(){
这个$emit(焦点)
},
},
已安装(){
},
}
/脚本
样式范围
/风格
使用
模板
c-输入标签=用户名：span= 12 @ keyup-enter= my keyu penter @ focus= my focus v-model= my name /
/模板
脚本
从导入输入组件地址/c-我踢。vue ；
导出默认值{
组件：{ c输入},
data() {
返回{
我的名字：未定义，
}},
.
方法：{
mykeyupEnter(){
console.log(我是父组件的输入框回车)},
myfocus(){
console.log(我是父组件的输入框得到焦点)
}
},
.
/脚本
四.slot插槽
什么是插槽？
插槽（插槽)是某视频剪辑软件提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。
插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制
怎么用插槽？
默认插槽
父组件
模板
差异
我是父组件
插槽一
p style=color:red 我是父组件插槽内容/p
/slotOne1
/div
/模板
在父组件引用的子组件中写入想要显示的内容（可以使用标签，也可以不用)
子组件（插槽1)
模板
div class=slotOne1
差异我是插槽一组件/div
插槽/插槽
/div
/模板
在子组件中写入插槽，插槽所在的位置就是父组件要显示的内容
具名插槽
子组件
模板
div class=slottwo
divslotwo/div
插槽名称=标题/槽
插槽/插槽
插槽名称=页脚/插槽
/div
/模板
在子组件中定义了三个狭槽标签，其中有两个分别添加了名字属性页眉和页脚
父组件
模板
差异
我是父组件
第二个
p啦啦啦，啦啦啦，我是卖报的小行家/p
模板slot=header
p我是名字为页眉的插槽/p
/模板
p槽=页脚我是名字为页脚的插槽/p
/slot-2
/div
/模板
在父组件中使用模板并写入对应的狭槽值来指定该内容在子组件中现实的位置（当然也不用必须写到模板),没有对应值的其他内容会被放到子组件中没有添加名字属性的狭槽中
作用域插槽
子组件
模板
差异
我是作用域插槽的子组件
slot :data=user/slot
/div
/模板
脚本
导出默认值{
名称："三号槽",
data () {
返回{
用户：[
{姓名：杰克，性别：男孩 },
{姓名：琼斯，性别：女孩 },
{姓名：汤姆，性别：男孩 }
]
}
}
}
/脚本
在子组件的狭槽标签上绑定需要的值
父组件
模板
差异
我是作用域插槽
三号位
模板插槽-作用域="用户"
div v-for=(item，index)in user。数据： key= index
{{item}}
/div
/模板
/slot-三
/div
/模板
在父组件上使用狭缝示波器属性，用户。数据就是子组件传过来的值
以上就是js版vue包组件基本步骤的细节。更多关于js包vue组件的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。