工作之余第二篇

vue组件：主要是拆分代码，减少vue实例的代码量，方便ui的重用。

　　　　　vue创建组件的方式，Vue.component(组件名称，组件构造器)，跟创建Vue对象相似，同样有data、methods、watch等，但是组件的data必须是一个函数，而且没有el获取根实例。

如下代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="app">
                <my-com></my-com>
        </div>
        <script type="text/javascript">
            Vue.component("myCom",{
                //data必须是一个函数
                data :function(){
                    return{
                        count:0    
                    }
                },
                template:"<button v-on:click='count++'>点击了{{count}}次</button>"
            })
            var vm = new Vue({
                el:"#app"
            })
        </script>
    </body>
</html>

还有通过extend的几种方式来实现的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="app">
            <my-com></my-com>
            <mycom2></mycom2>
            <mycom3></mycom3>
            <mycom4></mycom4>
        </div>
        <template id="temp">
            <div >
                <h1>第四种组件的实现方式</h1>
                <h2>这种写法的好处是能够提示信息</h2>
            </div>
        </template>
        <script>
            var com1 = Vue.extend({
                template:'<h1>组件的第一种实现方式</h1>'
            })
            Vue.component('myCom',com1)
            Vue.component('mycom2',Vue.extend({
                template:'<h2>组件的第二种实现方式</h2>'
            }))
            Vue.component('mycom3',{
                template:'<h3>组件的第三种实现方式</h3>'
            })
            Vue.component('mycom4',{
                template:"#temp"
            })
            var vm = new Vue({
                el:"#app"
            })
        </script>
    </body>
</html>

组件是通过prop来进行数据传递的。

猜你喜欢