vue component组件小结

了解完vue的一些必须知道的事情，就该看看vue的组件了，本部分我们以代码进行分析。

什么是组件？

就我而言，组件就是按照自己的需求自定义的元素，充分体现了打代码的重用性。官方文档如下：

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 js 特性扩展。

介绍组件：

我们以代码来了解vue组件

<body>
<div id="component">
    <child v-html="msg"></child>1，首先我们定义在实例化的Vue内部定义组件child并使用

    <!--解决DOM解析问题-->     2，对于标准的html而言有些标签对其子标签有一定的要求，is来解决
    <table>
        <tr is="child1"></tr>
    </table>

    <!--构造组件-->            3，下面是构造一个外部组件并传入数据，利用Vue.component()来构建
    <child3 msg3="gouzao"></child3>

    <!-- 内部切换组件-->       4，对于多个组件的切换问题，首先在引用组建时我们以<component v-bind:is="XXX"></componment>来引用，XXX处为你所需要的标签
    <input v-model="current">

    <component v-if="current=='child'" v-bind:is="current" msg="ninini"></component>
    <component v-else v-bind:is="current"></component>

    <button v-on:click="childbtn">childbtn</button>
    <button v-on:click="child1btn">childbtn1</button>
    <button v-on:click="child2btn">childbtn2</button>
</div>
<script src="js/vue.js"></script>
<script>
   //独立建立组件
    Vue.component('child3',{
        props:['msg3'],
        template:'<p>{{msg3}}</p>'
    });
   //内部组件切换
    var child={
        props:['msg'],
        template:"<p>{{msg}}</p>"
    };
    var child1={
        template:"<p>nihao</p>"
    };
      //组件嵌套             5，嵌套组件的定义方式如下，当调用父组件标签是自动加入子组件标签
    var child2={
        template:"<p>child2<chridren></chridren></p>",
        components:{
            'chridren':child1
        }
    };



    new Vue({
        el:"#component",
        data:{
            msg:"宝宝来咯",
            current:'child2'
        },
        components:{
            'child':child,
            'child1':child1,
            'child2':child2
        },
        methods:{
            childbtn:function(){
                this.current='child'
            },
            child1btn:function(){
                this.current='child1'
            },
            child2btn:function(){
                this.current='child2'
            }
        }
    });

</script>
</body>

以上五种类型，是我对标签的简单理解

vue component组件小结

猜你喜欢