首页 > 代码库 > Vue 学习（组件相关）
Vue 学习（组件相关）
实现组件三个步骤
- 组件构造器，Vue.extend(). 这个相当于模板，模板是干什么的呢？理解为 你看到的都是这货渲染出来的，它里面有data,template之类的
- 注册组件，Vue.component("name",module)。这货相当于打标签，上一步创建的，他给命名，第二个参数如果是对象的话，可以省去第一步
- 挂载组件
注册全局组件 Vue.component("my-component",{
//选项
})
局部组件 var Child={
template: "<div>我是子组件</div>"
}
###
可以将子组件注册到父组件中
var Parent=Vue.extend({
template:"<div>我是你爸爸<my-child></my-child></div>",
components: {
‘my-child‘: Child
}
});
注意顺序！！子组件一定要声明在父组件之前
上面这个错误是因为没有加，
```
var Test=Vue.extend({
template:"<div>123</div>"
})
var app=new Vue({
el:"#app2",
data:function(){
return count;
}
components:{
"Count":Test
}
})
```
这样会JJ 。上面代码中还有问题 data只能是函数，指的是在组件中，这个属于实例了，不能那么写。
<div id="app2">
<Count></Count>
<Count></Count>
<Count></Count>
</div>
<template id=‘count‘>
<div>
<button v-on:click="count+=1">{{count}}</button>
</div>
</template>
var Test=Vue.extend({
template:"#count",
data:function(){
return {count:0};
}
})
var app=new Vue({
el:"#app2",
components:{
"Count":Test
}
})
父子组件之间通信
屏幕剪辑的捕获时间: 2017/1/11 20:46
这样写是错误的，components其实就相当于Vue.component({ })的简写
<div id="app3">
<props-test v-bind:name="data1" v-bind:age="data2"></props-test>
</div>
var app3=new Vue({
el:"#app3",
data:{
data1:"JD",
data2:"21"
},
components:{
"props-test":{
template:"#propsTest",
props:["name","age"]
}
}
})
思考下整个过程中数据流怎么走？
首先在html模板中绑定实例中的数据 --> 在模板中声明要传入的props（一个数组），这个props将出现在
<my-component ></my-component>中 -->接着在具体模板中就会出现props。实例相当于在app3之上，父组件就是app3
<child-component v-bind:子组件prop="父组件数据属性"></child-component>
<template></template>一定要写在 #app 外，愚蠢的错误！
子组件影响父组件
通过v-on来触发 相当于自定义一个方法，当这个方法触发时，影响父组件。
```
<div id="app5">
<h1>父组件通过在子组件上的v-on监听变化</h1>
{{totalnum}}
<app5-v-on v-on:incrent="total"></app5-v-on>
<app5-v-on v-on:incrent="total"></app5-v-on>
</div>
<template id="app5tpl">
<div>
<button v-on:click="incrent">{{count}}</button>
</div>
</template>
Vue.component("app5-v-on",{
template:"#app5tpl",
data:function(){
return {
count:0
}
},
methods:{
incrent:function(){
this.count=+1;
this.$emit("incrent")
}
}
})
var app5=new Vue({
el:"#app5",
data:{
totalnum:0
},
methods:{
total:function(){
this.totalnum+=1
}
}
})
```
Vue 学习（组件相关）