Vue组件

Vue组件

1、通过Vue.extend()声明组件

Vue.extend是vue提供出来给我们实现组件的函数

（1）组装组件（声明组件）

var MyComponent = Vue.extend({

      //被封装的html内容

      template: '<div>This is your first vue components!</div>'，

      //绑定在这个组件内的数据

      data: '',

      //监听这个组件的事件的方法

      methods: '',

      //属性，通常被用来进行数据的通信

      props: ''

});

（2）注册组件——向vue核心容器注册这个组件

这是为了让vue更好的管理组件（复用和删除）

Vue.component('my-component', MyComponent);

//注册组件，传入别名（my-component）和组件名称（MyComponent）

（3）初始化Vue.js的管理边界

var vm = new Vue({

      el: '#app',

});

（4）在页面中嵌入

<div id="app">

    <my-component></my-component>

</div>

 

 

 

父子组件

1.1 全局注册

(1)构建注册子组件

//构建子组件child

var child = Vue.extend({

    template: '<div>这是子组件</div>'

});

//注册名为'child'的组件

Vue.component('child',child);

(2)构建注册父组件

//构建父组件parent,在其中嵌套child组件

var parent = Vue.extend({

    template: '<div>这是父组件<child></child></div>'

});

Vue.component('parent',parent);

(3)定义vue实例

var app = new Vue({

    el: '#app'

})

(4)使用父组件

<div id="app">

    <parent></parent>

</div>

 

1.2 局部注册

(1)构建子组件

var child = Vue.extend({

    template: '<div>这是子组件</div>'

});

(2)构建父组件

在父组件中局部注册子组件

var parent = Vue.extend({

    template: '<div>这是父组件<child></child></div>',

    components:{

        'child':child

    }

});

(3)定义vue实例

在vue实例中局部注册父组件

var app = new Vue({

    el: '#app',

    components:{

        'parent':parent

    }

})

(4)使用父组件

<div id="app">

    <parent></parent>

</div>

 

 

 

父子组件间通信

1.父传子

父组件传消息到子组件使用props，并且这传递是单向的，只能由父组件传到子组件。

如果父组件需要传多个数据给子组件，依次在后面加即可。

(1)在父组件中增加data，并绑定到子组件上

var parent = Vue.extend({

    template: '<div>这是父组件<child :pdata=data></child></div>',

    data(){

        return{

            data:'这是父组件传来的数据'

        }

    },

    components:{

        'child':child

    }

});

其中<child :pdata=data></child>，:pdata是v-bind:pdata的缩写，pdata是自定义传递数据的命名，子组件中也是用该名字获取数据，data是父组件中数据的命名。

 

(2)在子组件中通过props获取数据，并渲染出来

var child = Vue.extend({

    template: '<div>这是子组件 {{pdata}}</div>',

    props:['pdata']

});

父组件中数据发生变化，子组件中自动更新

子组件不可直接修改通过props获取到的父组件中的数据

 

 

2.子传父

子组件给父组件传值通过emit。父组件需在子组件标签上绑定emit事件。

(1)构建子组件

var child = Vue.extend({

    template: '<div><button @click="change">点击给父组件传值</button></div>',

    methods:{

        change: function(){

            this.$emit('posttoparent',10)

        }

    }

});

子组件按钮绑定了一个click事件，当点击按钮执行change方法，该方法触发emit事件，事件名为posttoparent，并且带了一个参数10。

(2)构建父组件

var parent = Vue.extend({

    template: '<div>来自子组件的值为：{{datafromchild}} <child v-on:posttoparent="getfromchild"></child></div>',

    data(){

        return{

            datafromchild:''

        }

    },

    components:{

        'child':child

    },

    methods: {

        getfromchild: function(val){

            this.datafromchild = val

        }

    }

});

父组件接收emit事件通过v-on指令，格式为：v-on:emit方法名="父组件方法"

 

3.兄弟组件间通信

兄弟组件间通信也是用的emit。但原生vue.js需要新建一个空的vue实例来当桥梁。

//新建一个空的vue实例bus

var bus = new Vue();

var myCom1 = Vue.extend({

    template: '<div><button @click="change">点击给兄弟组件传值</button></div>',

    methods:{

        change: function(){

            //通过空实例去触发emit

            bus.$emit('posttobro',10)

        }

    }

});

 

var myCom2 = Vue.extend({

    template: '<div>来自兄弟组件的值为：{{datafrombro}}</div>',

    data(){

        return{

            datafrombro:''

        }

    },

    mounted:function(){

      //通过空实例接收emit事件

        bus.$on('posttobro',function(val){

            this.datafrombro = val

        }.bind(this))

    }

});

 

Vue.component('my-com1',myCom1);

Vue.component('my-com2',myCom2);

 

var app = new Vue({

    el: '#app'

});

 

使用组件

<div id="app">

    <my-com1></my-com1>

    <my-com2></my-com2>

</div>