文章目录
组件化
1.组件的使用
创建组件构造器
Vue.extend()创建组件构造器
注册组件
Vue.component()注册组件
使用组件
Vue实例范围使用组件
2.全局组件与局部组件
全局组件
//全局组件
//1.创建组件构造器对象
const cpnC = Vue.extend({
//模板，容器基本的html
template: `
<div>
<h2>我是全局</h2>
<p>我是内容</p>
<p>我是内容</p>
</div>
`
})
//2.注册组件（全局组件）
Vue.component('my-cpn',cpnC);
//3.使用组件挂载
var app = new Vue({
el:"#app",
data:{
message:"Hello!"
}
})
局部组件
局部组件在vue内部定义
//局部组件
const cpnC1 = Vue.extend({
//模板，容器基本的html
template: `
<div>
<h2>我是局部组件</h2>
<p>我是内容</p>
<p>我是内容</p>
</div>
`
})
var app1 = new Vue({
el:"#app1",
components: {
cpn: cpnC1
}
})
父子组件
const cpnC2 = Vue.extend({
//模板，容器基本的html
template: `
<div>
<h2>我是父组件</h2>
<p>我是内容</p>
<p>我是内容</p>
<cpn></cpn>
</div>
`,
components: {
cpn:cpnC
}
})
3.模板template组件
分离写法
可以写一个temple然后再注册时引用就可以
<template id="cpn">
在这里写html模板
</template>
引用
Vue.component('cpn',{
template:'#cpn'
})
data存放位置
const data = {};
Vue.component('cpn',{
template:'#cpn'，
data(){
return data;
}
})
4.组件之间的通讯
props 属性向子组件传递数据
如下：
app2 vue对象中的data传递给cpn使用
主要注意的点
html中 :cstring=‘string’ 绑定数据让cpn能引用到父节点的值
app2 的components要将cpn注入进去
然后 cpn中的props属性可以做一些指定，例如取不到值默认显示和指定引用的类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/js/vue.js"></script>
</head>
<body>
<div id="app2">
<cpn :cstring='string' :cmovies='movies'></cpn>
</div>
</body>
<template id="templates">
<div>
<h1>组件</h1>
<p>{{cstring}}</p>
<h2>{{cmovies}}</h2>
</div>
</template>
<script>
const cpn = {
template:'#templates',
props: {
'cstring':{
type:String,//在这里可以指定多个类型例如 [String,Number]
default:'asdasdasd',//也可以是一个function 例如 default：function（）{return ‘dasdasd’}
validator:function(value){//可以对数据进行验证
console.log(value);
return value;
}
},
'cmovies':{
type:Array,
default:['例子1','例子2'],
required :true
}
},
data(){
return {};
},
methods:{
}
}
var app2 = new Vue({
el:"#app2",
data:{
string:'hello',
movies:['海尔兄弟','投名状']
},
components: {
cpn
}
})
</script>
</html>
可指定数据类型
String Number Boolean Array Object Date Function Symbol
事件向父组件发送消息
- 子组件模板监听到事件然后通过this.$emit(‘itemclick’,item);方式将事件发射出去
- 父组件监听这个事件进行处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/js/vue.js"></script>
</head>
<body>
<div id="app2">
<cpn @itemclick=emit></cpn>
</div>
</body>
<template id="templates">
<div>
<h1>按钮</h1>
<button v-for="(item,index) in categories" @click="buttonClick(item)">
{{index}}:{{item.name}}
</button>
</div>
</template>
<script>
//1.子组件
const cpn = {
template:'#templates',
data(){
return {
categories:[
{id:'1',name:'炸弹'},
{id:'2',name:'炸弹1'},
{id:'3',name:'炸弹2'},
{id:'4',name:'炸弹3'},
{id:'5',name:'炸弹4'},
{id:'6',name:'炸弹5'},
]
};
},
methods: {
buttonClick(item){
this.$emit('itemclick',item);
}
}
}
var app2 = new Vue({
el:"#app2",
data:{
},
components: {
cpn
},
methods:{
emit(item){
console.log(item);
}
}
})
</script>
</html>
5.获取子组件或父组件跟组件vue对象
子组件
console.log(this.$refs.refs.categories);
//这种写法需要给子组件增加ref标签
console.log( this.$children[0].categories);
父组件（不推荐使用因为耦合）
console.log(this.$parent.message);
根组件（可以使用根节点一般存储网关、ip、请求路径等）
console.log(this.$root.message);
6.vue文件
以后写组件会直接写成vue文件
<template>html代码模板</template>
<script>js代码</script>
<style scoped>css style只作用于当前模板</template>