vue中几种创建组件的方法

组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。本文为大家介绍了vue中几种常用的创建组件的方法。

1、全局注册组件:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <my-component></my-component>
        </div>
 
        <template id="myComponent">
            <div>This is a component!</div>
        </template>
    </body>
    <script src="js/vue.js"></script>
    <script>
 
        Vue.component('my-component',{
            template: '#myComponent',
            data(){
                return {}
            },
            methods: {
            }
        })
 
        new Vue({
            el: '#app'
        })
 
    </script>
</html>

2、局部注册组件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>局部注册组件</title>
</head>
<body>
    <section id="app">
        <my-component-a></my-component-a>
        <my-component-b></my-component-b>
    </section>
 
    <template id="a">
        <h1>这是一个A组件</h1>
    </template>
 
    <template id="b">
        <h2>这是一个B组件</h2>
    </template>
 
    <script type="text/javascript" src="js/vue.js"></script>
    
    <script type="text/javascript">
 
        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
         }
        })
    </script>
 
</body> 
</html>

3、使用x-template引入模板

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>x-template注册组件</title>
</head>
<body>
   
    <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>
 
</body> 
</html>

4、render函数注册组件( 类似于虚拟DOM的实现 )

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>render注册组件</title>
</head>
<body>
   
    <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>
 
</body> 
</html>

5、jsx注册组件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jsx注册组件</title>
</head>
<body>
   
    <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>
 
</body> 
</html>

其他组件相关知识点总结:

1、Vue.extend

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue.extend使用</title>
</head>
<body>
    
 
    <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>
</body> 
</html>

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')

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是vue中几种创建组件的方法的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏