Vue组件

Posted 随便写写

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue组件相关的知识，希望对你有一定的参考价值。

gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson12

 

一 创建组建的步骤

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue组件</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <zujian></zujian>
        </div>
        <script type="text/javascript">
            var myComponent = Vue.extend({   //第一步:定义
                template: ‘<div>我是内容</div>‘
            })
            
            Vue.component(‘zujian‘,myComponent)  //第二步:注册到Vue上面
            
            var myVue = new Vue({    //第三步:创建实例化
                el: ‘.test‘
            })
        </script>
    </body>
</html>

或者用一种简单的方法创建组件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue组件</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <template id="lili-template"> <!--注意此处必须是id,用class不行-->
            <div>我是内容2</div>
        </template>
        <div class="test">
            <zujian></zujian>
        </div>
        <script type="text/javascript">
            var myVue = new Vue({
                el: ‘.test‘,
                components: {
                    zujian: {
                        template: ‘#lili-template‘
                    }
                }
            })
        </script>
    </body>
</html>

 

二 父子组件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue组件--父子组件</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test"> <!--局部注册-->
            <zujian></zujian>
        </div>
        <script type="text/javascript">
            var childComponent = Vue.extend({   //第一步:定义
                template: ‘<div class="mychild">我是孩子</div>‘
            });
            var parentComponent = Vue.extend({
                template: ‘<div class="myParent">我是父容器<child></child></div>‘,  //注意此处要引用孩子组件
                components: {
                    ‘child‘: childComponent
                }
            });
            Vue.component(‘zujian‘,parentComponent);  //第二步:注册到Vue上面
            
            var myVue = new Vue({    //第三步:创建实例化
                el: ‘.test‘
            })
        </script>
    </body>
</html>

或者另一种比较明了的写法:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue组件--父子组件另一种写法</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <zujian></zujian>
        </div>
        <template id="parentComponent">
            <div class="myParent">
                我是父容器
                <child></child>
            </div>
        </template>
        
        <template id="childComponent">
            <div class="mychild">
                我是孩子
            </div>
        </template>
        
        <script type="text/javascript">
            
            var myVue = new Vue({ 
                el: ‘.test‘,
                components: {
                    zujian: {
                        template:‘#parentComponent‘,
                        components: {
                            child: {
                                template:‘#childComponent‘
                            }
                        }
                    }
                }
            })
        </script>
    </body>
</html>

 

三 Vue组件选项

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue组件--组件选项</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <div class="lala">
                <zujian></zujian>
            </div>
        </div>
        <script type="text/javascript">
            var myComponent = Vue.extend({   
                template: ‘<div>我是{{a}}{{b}}</div>‘,
                data : function () {   //不想让MyComponent 所有的实例将共享同一个 data 对象,所以将data写成函数形式返回
                    return {
                        a: 1,
                        b: 2
                    }
                },
                el: function () {   //不想让MyComponent 所有的实例将共享同一个 el 对象,所以将el写成函数形式返回
                    return ".lala"
                }
            })                    
            var myVue = new Vue({
                el: ‘.test‘,
                components: {
                    zujian:myComponent
                }
            })
        </script>
    </body>
</html>

 

四 Vue组件作用域(父子通信)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue组件--组件作用域</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <!-- 子组件模板 -->
        <template id="child-template">
          {{msg1}}
        </template>
        
        <!-- 父组件模板 -->
        <div id="events-example">
          <p>Messages: {{ messages | json }}</p>
          <child :msg1="mssss">
              
          </child>
        </div>
        
        <script type="text/javascript">

            var parent = new Vue({
              el: ‘#events-example‘,
              data: {
                messages: ‘我是父框架222‘,
                mssss: ‘ddddddd‘
              },
              components: {
                  child: {
                      template: ‘#child-template‘,
                      props: {msg1: String }
                    }
              }
            })
        </script>
    </body>
</html>

 

以上是关于Vue组件的主要内容，如果未能解决你的问题，请参考以下文章

vue3中的fragment（片段）组件

vue.js 2 - 将单个文件组件的 html 片段提取到独立文件中

Vue组件之全局组件与局部组件

Vue组件之全局组件与局部组件

vue-个人学习----组件

vue视频学习笔记05