### Vue中的组件

首先注册组件：

        Vue.component("my-btn", {
            data:function() {
                return {
                    count:0
                }
            },
            template:"#mybtn"
        });

需要一个组件名称和组件的代码模板，组件中的数据和Vue实例的数据不同，一个组件的data选项必须是一个函数。

定义模板

    <template id="mybtn">
        <button v-on:click="count++">已经点击了{{ count }}次！</button>
    </template>

编写Vue实例，完整代码如下：


    
    <script src="https://suiyan.cc/assets/plugins/vue.js"></script>
    <template id="mybtn">
        <button v-on:click="count++">已经点击了{{ count }}次！</button>
    </template>

    <div id="app">
        <my-btn></my-btn>
        <my-btn></my-btn>
        <my-btn></my-btn>
    </div>

    <script>
        Vue.component("my-btn", {
            data:function() {
                return {
                    count:0
                }
            },
            template:"#mybtn"
        });

        vm = new Vue({
            el:'#app'
        })

    </script>

如上，就可以实现一个全局的组件注册，可以重复使用。

Vue快速学习笔记(3)Vue的组件

### Vue组件中的数据传递

父组件向子组件传递数据:

* 使用`props`属性来定义子组件的数据。
* 使用`v-bind`指令在组件中可以使父组件的数据传递到子组件中。

示例代码

    
    <script src="https://suiyan.cc/assets/plugins/vue.js"></script>
    <template id="mh">
        <h1> {{finfo}}</h1>
    </template>

    <div id="app">
        <mh finfo="子组件的数据"></mh>
        <mh :finfo="msg"></mh>
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg:"这是父组件Vue实例中传来的消息。"
            },
            components:{
                mh:{
                    template:"#mh",
                    props:['finfo']
                }
            }
        });
    </script>


子组件向父组件传值

Vue快速学习笔记(4)Vue组件中的数据传递

### 在Vue中使用路由vue-router

1. `html`中导入vue-router.
2. 编写`router-link`和`router-view`标签代码
3. `JavaScript`中编写模板对象，定义路由对象及创建Vue实例。

具体代码参考：


    <div id="app">
        
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>

        
        <router-view></router-view>
    </div>

    <script>
        const login = {
            template: '<h1>登录组件</h1>'
        }
        const register = {
            template: '<h1>注册组件</h1>'
        }

        // 创建一个路由示例，通过routers属性来匹配规则
        const routerobj = new VueRouter({
            routes: [{
                    path: '/',
                    redirect: '/login'
                },
                {
                    path: '/login',
                    component: login
                },
                {
                    path: '/register',
                    component: register
                }
            ]
        });
        // 穿件Vue实例
        var vm = new Vue({
            el: '#app',
            router: routerobj
        });
    </script>

Vue快速学习笔记(4)Vue组件中的数据传递

Vue组件中的数据传递

相关文章