vue学习—组件的定义注册

组件的定义注册

效果：

方法一：

        <div id="box">
            <v-header></v-header>
            <hr />
            <br />
            {{name}}
            <hr />
            <br />
            <v-footer></v-footer>
        </div>
        <script>
            //1.定义组件
            var Header={
                template:'<h2>这是一个头部组件</h2>'
            }
            //2.注册组件
            Vue.component('v-header',Header);
            
            var Footer={
                template:'<h2>这是一个底部组件</h2>'
            }
            Vue.component('v-footer',Footer);/*组件名称不能用html标签*/
            
            //注意: 组件名称不能和html标签一样
            var vm=new Vue({
                el:'#box',
                data:{
                    name:'hello world'
                }
            })
        </script>        

方法二：

　　//定义组件和注册组件放在一起
    Vue.component('v-footer',{
        template:'<div><h2>这是一个底部组件</h2></div>'
    })
        

方法三（用的最多）：

            //1.定义组件
            var Header={
                template:'<h2>这是一个头部组件</h2>'
            }
            
            //1.定义组件
            var Footer={
                template:'<h2>这是一个footer组件</h2>'
            }
            
            var vm=new Vue({
                el:'#box',
                data:{
                    name:'ahah'
                },
                components:{
                    //2.注册组件
                    'v-header':Header,
                    'v-footer':Footer
                }
            })                    

方法四：

　　　　　　　　var vm=new Vue({
                el:'#box',
                data:{
                    name:'hhahhah'
                },
                components:{
                    'v-header':{
                        template:'<h2>这是一个头部组件</h2>'
                    },
                    'v-footer':{
                        template:'<h2>这是一个footer组件</h2>'
                    }
                }
            })

 vue组件的定义注册-深入

        <div id="box">
            <v-header></v-header>
            <hr />
            <br />
            {{name}}
            <hr />
            <br />
            <v-footer></v-footer>
        </div>
        <template id="header">
            <div>
                <h2>这是一个头部组件--{{msg}}</h2>
                <div class="button" @click="setData()">
                    点击改变msg
                </div>
            </div>
        </template>
        <template id="footer">
            <h2>这是一个底部组件--{{msg}}</h2>
        </template>
        <script>
            var Header={
                template:'#header',
                data:function(){
                    return {
                        msg:'这是头部组件的msg'
                    }
                },methods:{
                    setData:function(){
                        this.msg='改变头部组件的内容'
                    }
                }
            }
            var Footer={
                template:'#footer',
                data:function(){
                    return {
                        msg:'这是底部组件的msg'
                    }
                }
            }
            
            var vm=new Vue({
                el:'#box',
                data:{
                    name:'haha'
                },
                components:{
                    'v-header':Header,
                    'v-footer':Footer
                }
            })
        </script>            

 

点击按钮之后：

 

//------------------------------------------------------------------------------------------

vue组件 - 模板

　　　　　<div id="box">
            {{msg}}
            <v-header></v-header>
            <br />
            <br />
            <v-footer></v-footer>
        </div>
        <script type="x-template" id="header">
            <div class="header">
                <h2>这是标题</h2>
                <p>{{msg}}</p>
                <button @click="run()">这是一个按钮</button>
            </div>
        </script>
        <template id="footer">
            <div class="footer">
                <h2>这是底部组件的标题</h2>
                <p>这是一个底部组件的内容</p>
                <p>这是一个底部组件的内容</p>
            </div>
        </template>
        <script>
            //注意：模板里面所有的东西要被根元素包裹起来
            //定义组件
            var Header={
                template:'#header',
                data:function(){
                    return {
                        msg:'这是头部，哈哈哈'
                    }
                },methods:{
                    run:function(){
                        alert('run');
                    }
                }
            }
            
            var Footer={
                template:'#footer'
            }
            var vm=new Vue({
                el:'#box',
                data:{
                    msg:'hello vue'
                },
                components:{
                    //注册组件
                    'v-header':Header,
                    'v-footer':Footer
                }
            })
        </script>

 

vue父子组件

介绍

        <div id="box">
            {{a}}
            <br />
            <v-header></v-header>
        </div>
        <template id="header">
            <div>
                <h2>
                    我是头部组件11-{{msg}}
                    <br />
                    <v-nav></v-nav>
                </h2>
            </div>
        </template>
        <template id="nav">
            <div>
                <h2>这是一个nav组件--{{msg}}</h2>
            </div>
        </template>
        <script>
            //要放在组件 v-nav的定义之前
            var Nav={
                template:'#nav',
                data:function(){
                    return {
                        msg:'我是nav内容'
                    }
                }
            }
            var Header={
                template:'#header',
                data:function(){
                    return {
                        msg:'我是header内容'
                    }
                },components:{
                    'v-nav':Nav
                }
            }
            var vm=new Vue({
                el:'#box',
                data:{
                    a:'我是大box'
                },
                components:{
                    'v-header':Header,
                }
            })
        </script