1:组件的创建分为两种一种是全局组件,一种是局部组件
在Vue实例上的叫全局组件:
全局组件可以在多个实例中进行使用,但是局部组件只能在声明他的实例中使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id='app'>
<cpn1></cpn1>
<cpn1></cpn1>
</div>
</body>
<template id="cpn">
<div>
<button @click="up">+</button>
<diV>{{count}}</diV>
<button @click="dom">-</button>
</div>
</template>
</html>
<script>
Vue.component('cpn1',{
template:'#cpn',
data(){
return{
count:0
}
},
methods:{
up()
{
this.count++;
},
dom()
{
this.count--;
}
}
})
new Vue({
el:'#app',
data:{
},
methods:{
}
})
</script>
在Vue的实例对象上面定义的组件为局部组件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id='app'>
<cpn1></cpn1>
<cpn1></cpn1>
</div>
</body>
<template id="cpn">
<div>
<button @click="up">+</button>
<diV>{{count}}</diV>
<button @click="dom">-</button>
</div>
</template>
</html>
<script>
new Vue({
el: '#app',
data: {
},
methods: {
},
components: {
'cpn1': {
template: '#cpn',
data() {
return {
count: 0
}
},
methods: {
up() {
this.count++;
},
dom() {
this.count--;
}
}
}
}
})
</script>
2:模板的分离有两种
3:为什么在要使用data函数?
每个组件都有属于自己的方法,钩子函数,数据,组件是不能直接访问实例对象中的data的数据的,他必须有一个data函数,并且这个函数返回的是一个对象,对象内部保存的是数据。
至于为什么使用data函数是因为每一个组件都有自己的实例空间,使用data函数就可以解决这个问题,不用data函数的话,就会让所有的实例指向同一个data数据。
4:组件的传通信
父子组件的通信两种方式:
1:父组件传给子组件,props不支持驼峰
(1)通过数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id='app'>
<cpn1 :covice="covice" :message="message"></cpn1>
</div>
</body>
<template id="cpn">
<div>
<ul>
<li v-for="iterm in covice">{{iterm}}</li>
</ul>
<div>
{{message}}
</div>
</div>
</template>
</html>
<script>
new Vue({
el: '#app',
data: {
covice:['小红','小明','小春','小华'],
message:"caiyun"
},
methods: {
},
components: {
'cpn1': {
template: '#cpn',
data() {
return {
count: 0
}
},
methods: {
},
props: ['covice', 'message']
}
}
})
</script>
(2)通过对象,指定类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id='app'>
<cpn1 :covice="covice" :message="message"></cpn1>
</div>
</body>
<template id="cpn">
<div>
<ul>
<li v-for="iterm in covice">{{iterm}}</li>
</ul>
<div>
{{message}}
</div>
</div>
</template>
</html>
<script>
new Vue({
el: '#app',
data: {
covice:['小红','小明','小春','小华'],
message:"caiyun"
},
methods: {
},
components: {
'cpn1': {
template: '#cpn',
data() {
return {
count: 0
}
},
methods: {
},
props:
{
'covice':Array,
'message':String
}
}
}
})
</script>
(3)通过对象指定参数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id='app'>
<cpn1 ></cpn1>
</div>
</body>
<template id="cpn">
<div>
<ul>
<li v-for="iterm in covice">{{iterm}}</li>
</ul>
<div>
{{message}}
</div>
</div>
</template>
</html>
<script>
new Vue({
el: '#app',
data: {
covice:['小红','小明','小春','小华'],
message:"caiyun"
},
methods: {
},
components: {
'cpn1': {
template: '#cpn',
data() {
return {
count: 0
}
},
methods: {
},
props:
{
'covice':{
type:Array,
default(){
return ["hah","www",'ett']
}
},
'message':{
type:String,
default:"小明",
//表示必须传值过来
required:true
}
}
}
}
})
</script>
2:子组件通过事件传给父组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id='app'>
<cpn1 :once="once" @itemclick="clickitem"></cpn1>
</div>
</body>
<template id="cpn">
<div>
<div v-for="intem in once"><button @click="hom(intem)"></button></div>
</div>
</template>
</html>
<script>
new Vue({
el: '#app',
data: {
once:[{"id":1,"type":"电器"},{"id":2,"type":"电话"},{"id":3,"type":"电话2"},{"id":4,"type":"电话3"}]
},
methods: {
clickitem(item)
{
console.log("clickitem",item);
}
},
components: {
'cpn1': {
template: '#cpn',
data() {
return {
count: 0
}
},
methods: {
hom(iterm)
{
this.$emit("itemclick",iterm);
}
},
props:['once']
}
}
})
</script>
第二种传递方式:
1:可以直接通过this.$children获取所有的子组件的对象。
2:可以在子组件上面设置一个ref的属性,给他组件取个名字,通过this . $refs.组件的名字获取这个组件的对象
子访问父组件:
访问父组件
1:直接在子组件的方法中通过this.$parent(用的比较少,复用性不高)
访问根组件
2:this. $root
5:solt
使用直接通过在子组件中添加数据,然后通过插槽显示,这样可以实现把相同的东西提取出来,不相同的东西放到插槽里面。
具名的插槽:替换某个指定名字的插槽