组件
组件
a)、全局组件
组件:将公用的功能抽离出来,形成组件,目的就是复用代码
全局组件必须写在Vue实例创建之前,才在该根元素下面生效
全局组件 demo是组件的名字,后面{}是组件的内容
组件中的data必须是个方法,通过return map来定义数据
<body>
<div id="app">
<!--为了代码复用,所以能看到多个组件-->
<!-- <demo></demo>-->
<!-- <demo></demo>-->
<demo></demo>
<demo-key></demo-key>
</div>
<script src="vue.js"></script>
<script>
// 组件:将公用的功能抽离出来,形成组件,目的就是复用代码
// 全局组件 demo是组件的名字,后面{}是组件的内容
Vue.component('demo',{
template:'<h1 @click="change">{{msg}}</h1>',
//组件中的data必须是个方法,通过return map来定义数据
// 组件必须是个方法,是因为会被多个地方使用,来数据隔离
data:function () {
return{
msg:'msg'
}
},
methods:{
change:function () {
this.msg = 'test'
}
}
})
//用vue接管了#app 然后用写好的组件去渲染页面
new Vue({
el:'#app',
data:{},
methods:{},
components:{
'demo-key':{
template: '<h1 @click="change">{{msg}}</h1>',
data:function () {
return{
msg:0
}
},
methods:{
change:function () {
this.msg++
}
}
}
}
})
</script>
</body>
b)、局部组件
局部组件注册方式,直接在Vue实例里面注册
<body>
<div id="app1">
<child-component></child-component>
</div>
<script>
new Vue({
el: "#app1",
components:{
"child-component":{
template:"<h1>我是局部组件</h1>"
}
}
});
局部组件需要注意:
1.属性名为components,s千万别忘了;
2.套路比较深,所以建议模板定义在一个全局变量里,代码看起来容易一点,如下:(模板标签比较多的时候,这样子写更加简洁规整)
<body>
<div id="app1">
<child-component></child-component>
</div>
<script>
var child={
template:"<h1>我是局部组件</h1>"
};
new Vue({
el: "#app1",
components:{
"child-component":child
}
});
</script>
</body>
父子组件的交互
vm.$emit( event, arg )
$emit 绑定一个自定义事件event,当这个这个语句被执行到的时候,就会将参数arg传递给父组件,父组件通过@event监听并接收参数。
<body>
<div id="app">
<!-- change再去触发countAdd的方法,父组件的count就自动加了-->
<!-- 父组件就是div id="app"这个区域,子组件就是引用的组件-->
<number @change="countAdd"></number>
<number @change="countAdd"></number>
<div>父组件-<span>{{count}}</span></div>
</div>
<script src="vue.js"></script>
<script>
//实现的是 子组件点击数字就加1,父组件也+1,父组件是两个子组件的和
Vue.component('number',{
template:'<div>子组件-<span @click="add">{{num}}</span></div>',
data:function (){
return{
num:0
}
},
methods:{
add:function (){
this.num++
//告诉父组件+1了
this.$emit('change')
//触发了一个change方法,这个change方法绑定在子组件上
}
}
})
new Vue({
el:'#app',
data:{
count:0
},
methods: {
countAdd:function () {
this.count++
}
}
})
</script>
</body>