微客导航 » 文章资讯 » Vue学习之组件用法实例详解

Vue学习之组件用法实例详解

2023-08-03 12:12:04 169

本文实例讲述了Vue学习之组件用法。分享给大家供大家参考，具体如下：

Vue中的模块化、可重用代码块将页面细分为一个个功能组件，而且组件之间可以嵌套。组件分为全局组件与局部组件，局部组件在实例中进行注册，并且只可以应用于该实例中。

1、组件的使用流程：

//1、创建组件构造器
letoverallDiv=Vue.extend({
template:`

这是一个全局组件div

`
});
//2、注册全局组件
Vue.component('overall-div',overallDiv);
//3、实例化,组件只有在实例化的div内才能使用，不可以直接在页面中使用
letvue=newVue({
el:'#app',
data:{},
//在实例内注册局部组件，其创建与注册可以合为一步来写
components:{
'local-div':{
template:
`
这是一个局部组件div

`
}
},
methods:{
}
});

在HTML页面实例化的div中使用组件:

注意：一些HTML标签对放入其中的标签有限制，这时需要通过is属性将组件转化为你要放入的组件，例如

，这时，你可以使用
，这样就相当于放入了
标签。

2、template模板

组件的模板除了在js中创建外，还可以使用页面中的template创建模板，注意页面中的模板只能有一个根元素，如有多个元素需要包含在一个div内，例如页面body中的模板：
```
这是页面中的模板
```
在js中通过id号注册模板。
```
Vue.component('my-tmp',{
template:'#myTmp'
});
```
3、组件的data

在组件中使用data必须以函数的形式返回,如果以属性值的形式存在，所有的组件会共享一个属性值，更改其中一个，所有的组件都会收到影响。例如一个统计被点击次数的组件：
```
按钮被点击{{count}}次
```
```
Vue.component('my-btn',{
template:'#myBtn',
data(){//以函数返回的方式定义组件使用的data
return{
count:0
};
}
});
```

在页面中分别点击两个按钮，两个按钮组件的count分别计数，不会互相干扰：

4、父子组件

先创建子组件，然后再父组件内进行注册，就可以在父组件的模板内使用子组件，然后再注册父组件，这样就可以在外部调用包含子组件的父组件了，外部直接使用父组件接口，而不需要知道内部子组件的实现

注意在外部不能直接使用子组件，因为它只在父组件内进行了注册，外部看不到子组件

letchild1=Vue.extend({
template:`这是子组件1`
});
letchild2=Vue.extend({
template:`这是子组件2`
});
Vue.component('parent',{
components:{
'c1':child1,
'c2':child2
},
//在父组件内调用子组件
template:`父组件`
});

结果如图：

5、插槽slot

像生活中的容器一样，slot允许向其中插入标签、组件等内容，而在外部提供一个框子包装起来。slot分为匿名插槽与实名插槽，匿名插槽可以向其中插入任何类型的内容。

实名slot可以将内容插入指定的插槽内，就像一台电脑的主板，cpu、内存条分别有自己对应的插槽，实名插槽在模板中通过name属性规定插槽的名字，在使用时，通过标签的slot属性指定对应的name，可以将标签插入指定的插槽。

匿名插槽




这是插槽头部
插槽默认显示内容

插槽尾部

letvue2=newVue({ el:'#app2', data:{ }, components:{ //绑定匿名插槽 'anonymous-slot':{ template:'#anonymousDiv' }, //绑定实名插槽 'realname-slot':{ template:'#realnameDiv' } } });

向cpu插槽内插入内容：



向插槽中插入一段文字

插槽未放入内容时：插入一段文字：

实名插槽



实名插槽头部
这是cpu插槽
这是内存条插槽
这是硬盘插槽



IntelCorei5

结果：cpu放入指定插槽，而其他插槽未受影响：

希望本文所述对大家vue.js程序设计有所帮助。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

Vue学习之组件用法实例详解

1、组件的使用流程：

2、template模板

3、组件的data

4、父子组件

5、插槽slot

这是插槽头部

实名插槽头部

热门推荐

随机推荐