其他vue相关文章可以在我个人分类中的vue.js部分查看
# 目录
● Vue组件
● 全局组件 & 局部组件
● 一种更加推荐的构建组件方法
● 组件中的数据与方法
# Vue组件
组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:
组件化与模块化的区别:
- 模块化从代码逻辑出发,进行划分以达到职能单一的目的
- 组件化从UI角度出发,对页面进行拆分,方便相似内容的重用
# 全局组件 & 局部组件
注意:组件的命名使用 - 来连接,而不要使用驼峰命名法
全局组件
<div id="app">
<simple-template></simple-template>
</div>
<script>
//全局组件
Vue.component('simple-template', {
//如果你想在引号中写一个复杂的模板,那么必须用一个div将他们括起来
template: `
<div>
<h1>这是一个最简单最简单的模板</h1>
<p>hhhhh</p>
</div>
`
})
//实例Vue
var vm = new Vue({
el: "#app"
})
</script>
局部组件
<div id="app">
<template-a></template-a>
</div>
<script>
//局部组件
var componentA = {
template:`<p>这是一个局部组件A</p>`
}
//实例Vue
var vm = new Vue({
el: "#app",
components:{
'component-a'=componentA
}
})
</script>
# 一种更加推荐的构建组件方法
不难发现,在引号中间的html代码写起来很不方便,由于没有语法提示,很容易出错,所以推荐一种更为好用的方式来构建组件。
<div id='app'></div>
<template id="com1">
<!--组件内容-->
</template>
<script>
//全局组件
Vue.component('good-template', {
template: "#com1"
})
//实例Vue
var vm = new Vue({
el: "#app"
})
</script>
# 组件中的数据与方法
组件中的数据与Vue示例中的数据不同,需要是一个函数并且拥有默认返回对象,所以我们可以这么写
<div id="app">
<mycom></mycom>
</div>
<template id="mycom">
<div>
<input type="button" value="+1" @click="addself" />
<p>{{count}}</p>
</div>
</template>
<script>
Vue.component("mycom", {
template: "#mycom",
data() {
return {
count: 0
}
},
methods: {
addself() {
this.count++
}
}
})
var vm = new Vue({
el: "#app"
})
</script>
# 组件传值
子组件默认无法访问到父组件中的data和method,所以需要引用props来完成传值
示例:
<div id="app">
<!--传data-->
<component-a :msg="msg"></component-a>
<!--传method-->
<component-a @show="show"></component-a>
</div>
<script>
//局部组件
var componentA = {
template:`<p @click="show">这是一个局部组件--{{msg}}</p>`,
props:['msg'],
methods:{
show(){
this.$emit("show")
}
}
}
//实例Vue
var vm = new Vue({
el: "#app",
data: {
msg:"这是一个父组件"
},
components:{
'component-a':componentA
}
})
</script>