Vue 学习（组件相关）

标签：干什么   数据   cti   html模板   style   技术   bin   绑定   渲染   

实现组件三个步骤

1. 组件构造器，Vue.extend(). 这个相当于模板，模板是干什么的呢？理解为 你看到的都是这货渲染出来的，它里面有data,template之类的
2. 注册组件，Vue.component("name",module)。这货相当于打标签，上一步创建的，他给命名，第二个参数如果是对象的话，可以省去第一步
3. 挂载组件

      

注册全局组件 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 学习（组件相关）

标签：干什么   数据   cti   html模板   style   技术   bin   绑定   渲染   

原文地址：http://www.cnblogs.com/liuestc/p/6286791.html