Vue.js组件(component)的创建
组件compoent组件是什么创建组件创建全局组件使用组件创建局部私有组件组件是什么组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。创建组件创建全局组件第一种创建方式:语法结构:Vue.component('组件名称',Vue.extend({template:'html结构'}))Vue.extend():使用基础 Vue 构造器
组件是什么
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。
创建组件
创建全局组件
第一种创建方式:
语法结构:Vue.component('组件名称',Vue.extend({template:'html结构'}))
Vue.extend():使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。
y
用法:
<script>
Vue.component('mycom1',Vue.extend({
template:'<h1>这是使用Vue.extend()创建组件<h1>'
}))
//或者
var com1 = Vue.extend({
template:"<h1这是使用Vue.extend()创建组件h1>"
})
Vue.component('mycom1',com1);
new Vue({
el:'#app',
data:{},
methods:{}
})
</script>
注意:mycom1
是我们自定义的创建全局组件的名称,template
中的模板字符串,是想要渲染在页面上的内容
第二种创建方式
语法结构:Vue.component('组件名称',{ template:'html结构' })
用法:
<script>
Vue.component('mycom2',{
template:"<h1>这是第二种方式创建组件</h1>"
})
new Vue({
el:'#app',
data:{},
methods:{}
})
</script>
这种方式是直接将我们需要渲染的html结构作为Vue.component()的第二个参数传递进去。此时,Vue默认自动调用Vue.extend()
第三种创建方式
语法结构:
<template id='tmp1'>
</template>
<script>
Vue.component('组件名称',{
template:'#tmp1'
})
</script>
用法:
<template id="tmp1">
<div>
<h1>这是第三种创建组件的方式</h1>
</div>
</template>
<script>
Vue.component('mycom3',{
template:"#tmp1"
})
new Vue({
el:'#app',
data:{},
methods:{}
})
</script>
这种方式与上面的方式差不多,只是将渲染模板单独拉出来写了。
注意如果将template模板单独放在外部写,必须要一个容器包裹着html元素,此例用div包裹着h1
使用组件
我们创建组件之后,要想组件发挥作用,就需要调用组件
调用方式:类似于写html标签
一样
<组件名称></组件名称>
或者 <组件名称/>
以上面三种方式为例,调用组件:
<div id="app">
<mycom1></mycom1>
<mycom2></mycom2>
<mycom3></mycom3>
</div>
<template id="tmp1">
<div>
<h1>这是第三种创建组件的方式</h1>
</div>
</template>
<script>
Vue.component('mycom1',Vue.extend({
template:'<h1>这是使用Vue.extend()创建组件</h1>'
}))
//或者
// var com1 = Vue.extend({
// template:"<h1这是使用Vue.extend()创建组件h1>"
// })
// Vue.component('mycom1',com1)
Vue.component('mycom2',{
template:"<h1>这是第二种方式创建组件</h1>"
})
Vue.component('mycom3',{
template:"#tmp1"
})
new Vue({
el:'#app',
data:{},
methods:{}
})
</script>
结果如下:
创建局部私有组件
私有组件的创建方式与前面所学过的私有过滤器创建的方法相似,给Vue实例对象添加components
属性
语法结构:
第一种方式:
<script>
new Vue({
el:'#app',
data:{},
methods:{},
components:{
'自定义组件名称':模板对象
}
}
})
</script>
或者将模板直接写进结构里面也可以
components:{
自定义组件名称:{
template:"html结构"
}
}
第二种方式:使用字面量的方式定义模板对象
var tmp2 = {
template:'html结构'
}
<script>
new Vue({
el:'#app',
data:{},
methods:{},
components:{
tmp2
}
}
})
</script>
私有组件的使用方式和全局组件的使用方式一样,直接调用就可以了
组件的应用
父子组件之间的通信
更多推荐
所有评论(0)