组件
组件注册方式有两种,一种是全局注册,一种是局部注册。全局注册的组件在所有地方可用使用,局部组件只有它的父组件可以用。
全局注册如下
Vue.component('button-counter',{
data(){
return{
count:0
}
},
template:`<button @click='handle'>点击了{{count}}次</button>`,
methods:{
handle(){
this.count++
}
}
})
局部注册如下
var HelloWorld={
data(){
return{
msg:'helloword'
}
},
template:`<div>{{msg}}</div>`
}
var vm = new Vue({
el: '#app',
data: {
},
components:{
'hello-world':HelloWorld
}
});
注册组件的注意事项
什么是模板字符串串=?就是··
里面的东西
驼峰命名在dom元素中使用时,要换成a-b这种小写模式,如MyCom
编程my-com
组件通信
注意:在dom元素中,props属性名不能用驼峰,用a-b代替组件名如果是驼峰,在dom中也用a-b代替。
props属性前没加v-bind,那么后面的数据被看成字符串,加上v-bind那么被绑定的是什么类型,就被看成什么类型
子传父
注意:自定义事件名,不可以是驼峰。字符串模板里也不能用驼峰。必须a-b这种方式。
带参数的子传父
注意点,父组件dom元素中,参数必须写成
m
s
g
,
否
则
得
不
到
正
确
结
果
。
父
组
件
中
只
能
用
msg,否则得不到正确结果。 父组件中只能用
msg,否则得不到正确结果。父组件中只能用$event接受参数
非父子组件传值(新手非重点要求)
原理
兄弟组件交互代码示例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>父组件</div>
<div>
<button @click='handle'>销毁事件</button>
</div>
<test-tom></test-tom>
<test-jerry></test-jerry>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
兄弟组件之间数据传递
*/
// 提供事件中心
var hub = new Vue();
Vue.component('test-tom', {
data: function(){
return {
num: 0
}
},
template: `
<div>
<div>TOM:{{num}}</div>
<div>
<button @click='handle'>点击</button>
</div>
</div>
`,
methods: {
handle: function(){
hub.$emit('jerry-event', 2);
}
},
mounted: function() {
// 监听事件
hub.$on('tom-event', (val) => {
this.num += val;
});
}
});
Vue.component('test-jerry', {
data: function(){
return {
num: 0
}
},
template: `
<div>
<div>JERRY:{{num}}</div>
<div>
<button @click='handle'>点击</button>
</div>
</div>
`,
methods: {
handle: function(){
// 触发兄弟组件的事件
hub.$emit('tom-event', 1);
}
},
mounted: function() {
// 监听事件
hub.$on('jerry-event', (val) => {
this.num += val;
});
}
});
var vm = new Vue({
el: '#app',
data: {
},
methods: {
handle: function(){
hub.$off('tom-event');
hub.$off('jerry-event');
}
}
});
</script>
</body>
</html>
插槽
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<alert-box>
<div>123</div>
<div>1234</div>
</alert-box>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
组件插槽:父组件向子组件传递内容
*/
Vue.component('alert-box', {
template: `
<div>
<slot>默认内容</slot>
<slot>默认内容2</slot>
</div>
`
});
var vm = new Vue({
el: '#app',
data: {
}
});
</script>
</body>
</html>
结果
由此可见:所有子组件中写的额外内容都会被放到与之匹配的插槽中
作用域插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
.current {
color: orange;
}
</style>
<body>
<div id="app">
<fruit-list :list='list'>
<template slot-scope='scope'>
<strong v-if='scope.info.id==3'>{{scope.info.name}}</strong>
<span v-else>{{scope.info.name}}</span>
</template>
</fruit-list>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
作用域插槽
*/
Vue.component('fruit-list', {
props: ['list'],
template: `
<div>
<li :key='item.id' v-for='item in list'>
<slot :info='item'>{{item.name}}</slot>
</li>
</div>
`
});
var vm = new Vue({
el: '#app',
data: {
list: [{
id: 1,
name: 'apple'
},{
id: 2,
name: 'orange'
},{
id: 3,
name: 'banana'
}]
}
});
</script>
</body>
</html>
结果:
来自黑马程序员vue教程