求楼主顶个

全局注册组件：
<!DOCTYPE html>
```
<template id="myComponent">
    <div>This is a component!</div>
</template>
```
Vue.component('my-component',{ template: '#myComponent', data(){ return {} }, methods: { } }) new Vue({ el: '#app' })
局部注册组件
<!DOCTYPE html>

局部注册组件

这是一个A组件

这是一个B组件

const componentA = { template: '#a', data(){ return { } } //... } const componentB = { template: '#b', data(){ return { } } //... } var vm = new Vue({ el: '#app', components: { // 局部注册，my-component-a是标签名称 'my-component-a': componentA, // 局部注册，my-component-b是标签名称 'my-component-b': componentB } })

3. 使用x-template引入模板
<!DOCTYPE html>

x-template注册组件

<script type="text/javascript" src="js/vue.js"></script>

<script type="text/x-template" id="checkbox-template"> 
    <div class="checkbox-wrapper" @click="check"> <div :class="{ checkbox: true, checked: checked }"></div> <div class="title"></div> </div> 
</script>

<script type="text/javascript">

    Vue.component('my-checkbox', { 
        template: '#checkbox-template', 
        data() { 
            return { checked: false, title: 'Check me' } }, 
        methods: { 
            check() { 
                this.checked = !this.checked; 
            } 
        } 
    }); 
</script>

4. render函数注册组件（类似于虚拟DOM的实现）
<!DOCTYPE html>

render注册组件

<my-checkbox></my-checkbox>

<script type="text/javascript" src="js/vue.js"></script>

<script type="text/javascript">

    Vue.component('my-checkbox', {
        data() {
            return {
                checked: false,
                title: 'Check me'
            }
        },
        methods: {
            check() {
                this.checked = !this.checked;
            }
        },
        render(createElement) {
            return createElement('div', {
                attrs: {
                    'class': 'checkbox-wrapper'
                },
                on: {
                    click: this.check
                }
            },
            [
                createElement('div', {
                    'class': {
                        checkbox: true,
                        checked: this.checked
                    }
                }),
                createElement('div', {
                    attrs: {
                        'class': 'title'
                    }
                }, [this.title] )
            ]);
        }
    });
</script>

5. jsx注册组件
<!DOCTYPE html>

jsx注册组件

<my-checkbox></my-checkbox>

<script type="text/javascript" src="js/vue.js"></script>

<script type="text/javascript">

Vue.component('my-checkbox', {
    data() {
        return {
            checked: false,
            title: 'Check me'
        }
    },
    methods: {
        check() {
            this.checked = !this.checked;
        }
    },
    render() {
        return <div class = "checkbox-wrapper"onClick = { this.check}>
                <div class = {
                    {
                        checkbox: true,
                        checked: this.checked
                    }
                }></div>
                <div class="title">{ this.title }</div>
        </div> } });
</script>

其他组件相关知识点总结：
1. Vue.extend
概述：Vue.extend返回的是一个“扩展实例构造器”，也就是预设了部分选项的Vue的实例构造器，它常常服务于Vue.component用来生成组件，可以简单理解为当在模板中遇到该组件作为标签的自定义元素时，会自动调用“扩展实例构造器”来生产组件实例，并挂在到自定义元素上

<!DOCTYPE html>

Vue.extend使用

<author></author>

<div id="author"></div>


<script type="text/javascript" src="js/vue.js"></script>

<script type="text/javascript">


    //挂载到标签为author自定义标签上
    var author1 = Vue.extend({
      template: "<p><a :href='url'>{{author}}</a></p>",
      data : function() {
        return {
          author : 'vamous',
          url : 'http://blog.csdn.net/Dear_Mr/article/details/72614370'
        }
      }
    });

    new author1().$mount('author');

    //使用propsData 挂载到id为author标签上
    var author2 = Vue.extend({
      template: "<p><a :href='url'>{{author}} & {{name}}</a></p>",
      data : function() {
        return {
          author : 'vamous',
          url : 'http://blog.csdn.net/Dear_Mr/article/details/72614370'
        }
      },
      props : ['name']
    });

    new author2({propsData: {name : 'dear_mr'}}).$mount('#author');

</script>

2. Vue.extend 和 Vue.component的区别和联系
extend 是构造一个组件的语法器.
你给它参数他给你一个组件然后这个组件

你可以作用到Vue.component 这个全局注册方法里，也可以在任意vue模板里使用car组件

var car = Vue.extend({
//….
})
Vue.component('car',car)
你可以作用到vue实例或者某个组件中的components属性中并在内部使用car组件

new Vue({
components:{
car:car
}
})
Vue.component 你可以创建，也可以取组件例如下

var car = Vue.component('car')

哈哈哈666666

初学vue,不知道注册组件和创建组件有什么区别，感觉效果一样啊

2条回答

为你推荐