十二.Vue组件
十二.Vue组件
Yuyy
发布于 2022-06-28 20:44:27
发布于 2022-06-28 20:44:27
代码可运行
运行总次数：0
代码可运行
本文最后更新于 868 天前，其中的信息可能已经有所发展或是发生改变。
定义Vue组件
- 什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；
- 组件化和模块化的不同：
- 模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；
- 组件化： 是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；
组件定义的五种方式
- 使用 Vue.extend 配合 Vue.component 方法：
var login = Vue.extend({
template: '<h1>登录</h1>'
});
Vue.component('login', login);- 直接使用 Vue.component 方法：
Vue.component('register', {
template: '<h1>注册</h1>'
});- 将模板字符串，定义到script标签种：
<script id="tmpl" type="x-template">
<div><a href="#">登录</a> | <a href="#">注册</a></div>
</script>同时，需要使用 Vue.component 来定义组件：
Vue.component('account', {
template: '#tmpl'
});- 作为对象
var tmp1={
template:'<h1> helle Vue 组件</h1>
}
Vue.component('myCom5',tmp1)- 私有模板的快速定义
var tmp2={
template:'<h1> helle Vue 组件6</h1>'
}
var vm = new Vue({
el:"#app",
data:{
},
methods:{
},
components:{
tmp2
}
})
<tmp2></tmp2>注意： 组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹！ 如果使用 Vue.component 定义全局组件的时候，组件名称使用了 驼峰命名，则在引用组件的时候，需要把 大写的驼峰改为小写的字母，同时，两个单词之前，使用 - 链接； 如果不使用驼峰,则直接拿名称来使用即可;
vue组件上的data和methods
- 组件可以有自己的 data 数据
- 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象,但是 组件中的 data 必须是一个方法
- 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行;
- 组件中 的data 数据,使用方式,和实例中的 data 使用方式完全一样!
Vue.component('mycom1', {
template: '<h1>这是全局组件 --- {{msg}}</h1>',
data: function () {
return {
msg: '这是组件的中data定义的数据'
}
}
})- 这是一个计数器的组件, 身上有个按钮,每当点击按钮,让 data 中的 count 值 +1
Vue.component('counter', {
template: '#tmpl',
data: function () {
// return dataObj
return { count: 0 }
},
methods: {
increment() {
this.count++
}
}
})组件切换
Vue提供了 component ,来展示对应名称的组件 component 是一个占位符, :is 属性,可以用来指定要展示的组件的名称
<component :is="comName"></component>总结:当前学习了几个 Vue 提供的标签了 component, template, transition, transitionGroup
使用 this.$refs 来获取元素和组件
<com1 ref="mytemplate"></com1>
<h3 ref="myh3">获取的元素</h3>console.log(this.$refs.myh3.innerText)
this.$refs.mytemplate.tmp1show()注意：关于组件的属性绑定都应该在使用组件的地方编写，而不是在组件的模板里编写
Post Views: 320
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-2-10 1，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
