Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 组件 - 介绍及定义
目录
组件
为什么组件化
扩展HTML元素，封装可重用的代码
组件封装
Dom css js都需要封装起来 封装后使用像一个标签
如下图所示：
组件注册方式
定义组件
定义规则和特点
1.命名：js驼峰，html链接符
2.dom片段 没有代码提示 没有高亮显示 - vue单文件组件解决
3.css 只能写成行内 - vue单文件组件解决
4.template 包含一个根节点
5.组件是孤岛，无法直接访问外面组件的状态或者方法 - 间接的组件通信来交流
6.自定义的组件 data 必须是一个函数
7.所有的组件都在一起， 太乱了 - vue单文件组件解决
定义示例
Vue2写法，使用Vue component定义一个全局的导航组件。
示例如下：
<script src="../lib/vue.js"></script>
<div id="box">
<navbar></navbar>
</div>
<script>
// 定义一个全局组件
Vue.component("navbar", {
//dom, js, css
template: `<div style="background:red">
<button>左</button>
电影
<button>右</button>
</div>`
})
let vm = new Vue({
el:"#box",
data:{}
})
</script>注意：组件内无法访问外部的方法
效果：
定义方法和属性
在组件内定义方法、计算属性；示例如下：
// 定义一个全局组件
Vue.component("navbar", {
//dom, js, css
template: `<div style="background:red">
<button @click="handleLeft">左</button>
电影
<button @click="handleRight">右</button>
</div>`,
methods: {
handleLeft() {
console.log("左")
},
handleRight() {
console.log("右")
}
}
})组件内定义数据
在组件内定义数据需要使用函数式。
示例如下：
Vue.component("navbar", {
//dom, js, css
template: `<div style="background:red">
<button @click="handleLeft">左</button>
电影
<button @click="handleRight">右</button>
</div>`,
methods: {
handleLeft() {
console.log("左")
},
handleRight() {
console.log("右")
}
},
data() {
return {
}
}
})全局和局部组件
组件定义又分为全局和局部组件。
全局组件
直接使用Vue.component定义全局组件。
示例如下：
<script src="../lib/vue.js"></script>
<div id="box">
<quan-navbar></quan-navbar>
</div>
<script>
Vue.component("quanNavbar", {
//dom, js, css
template: `<div style="background:red">
<button @click="handleLeft">左</button>
电影-{
{myname}}
<button @click="handleRight">右</button>
</div>`,
methods: {
handleLeft() {
console.log("左")
},
handleRight() {
console.log("右")
}
},
data() {
return {
myname:'张三'
}
}
})
let vm = new Vue({
el:"#box",
data:{}
})
</script>设置子组件
在上面的全局组件quan-navbar中定义一个子组件child。
child隶属于quan-navbar组件的子组件。
示例如下：
Vue.component("child", {
template:`<div style="background:yellow">child</div>`
})
Vue.component("quanNavbar", {
//dom, js, css
template: `<div style="background:red">
<button @click="handleLeft">左</button>
电影-{
{myname}}
<button @click="handleRight">右</button>
<child></child>
</div>`,
methods: {
handleLeft() {
console.log("左")
},
handleRight() {
console.log("右")
}
}
})这种属于全局定义，可以在父组件中使用，也可以在外面使用。
定义局部组件
在父组件定义中，设置组件属性中定义子组件，这是局部组件定义方式。
在quan-navbar组件中使用components定义一个局部子组件。
示例如下：
<script src="../lib/vue.js"></script>
<div id="box">
<quan-navbar></quan-navbar>
<child></child>
</div>
<script>
Vue.component("child", {
template:`<div style="background:yellow">标语</div>`
})
Vue.component("quanNavbar", {
//dom, js, css
template: `<div style="background:red;border:5px solid black">
<button @click="handleLeft">左</button>
电影-{
{myname}}
<button @click="handleRight">右</button>
<child></child>
<son-child></son-child>
</div>`,
methods: {
handleLeft() {
console.log("左")
},
handleRight() {
console.log("右")
}
},
data() {
return {
myname:'张三'
}
},
components: {
"sonChild" : {
template:`<div>child</div>`
}
}
})
let vm = new Vue({
el:"#box",
data:{}
})
</script>效果：
类似于定义的全局函数和函数内部的局部函数，
示例如下：
function parent() {
function child1() {
}
child2()
child1()
}
function child2() {
}
child2()总结
Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 组件 - 介绍及定义