带着实例继续学习(1):组件式登录页面-点击事件、组件通讯

本节课要点

我们利用之前学到的知识点做一个用户登录框，其中
1.为了界面不至于太恶心，我们引入bootstrap样式
2.我们故意把登录界面要素比如用户名、密码和提交按钮分成3个组件（仅仅是为了学习，增加难度）

一、引入bootstrap

新建目录css和fonts，放入对应的文件。

安装相应的webpack插件

为了正确的加载bootstrap中的样式和字体，我们需要安装

 npm install file-loader --save-dev

webpack的配置文件中要加入

{test:/\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,loader:"file"}

二、折腾组件

user-login.vue内容如下：

<template>
    <div id="user-login" class="col-md-8 col-md-offset-2">
        <h2 class="text-center">用户登录</h2>
        <form class="form-horizontal" role="form">
            <user-name placeholder="请输入你的用户名"></user-name>
        </form>
    </div>
</template>

<style>
    @import "./../css/bootstrap.min.css";
    #user-login{
        margin-top: 50px;
    }
</style>

<script>
   import username from "./user/use-name.vue";
    export default{
        components:{
           "user-name":username
        }
    }
</script>

user-name.vue内容如下：

<template>
    <div class="row">
        <div class="form-group">
            <label class="col-sm-2">用户名</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" :placeholder="username">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-10 col-sm-offset-2">
                <button type="button" class="btn btn-default">提交</button>
            </div>
        </div>
    </div>
</template>

<script>
    export default{
        props:["placeholder"]
    }
</script>

然后要修改入门文件jssrc/index.js

import Vue from "vue";


import userlogin from "./../components/user-login.vue";

new Vue({
    el:".container",
    components:{"user-login": userlogin}
});

执行webpack打包，浏览器查看编译之后的html，效果如下：

三、事件是怎么处理的

比如我们点击『提交』按钮，应该怎么处理？

<script>
    export default{
        props:["placeholder"],
        methods:{
            test(){
                alert("test");
            }
        }
    }
</script>

 <button type="button" v-on:click="test" class="btn btn-default">提交</button>

四、怎么获取文本框的值

v-model 双向数据绑定
官方解释如下：可以用v-model指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。尽管有点儿神奇，v-model不过是语法糖，在用户输入事件中更新数据，以及特别处理一些极端例子。

<input type="text" v-model="username" class="form-control" :placeholder="username">

<script>
    export default{
        props:["placeholder"],
        data:function () {
            return {username:"张三"}
        },
        methods:{
            test(){
                alert(this.username);
            }
        }
    }

五、组件之间的通讯

1.先把提交按钮拆分出来

user-submit.vue内容如下：

<template>
    <div class="form-group">
        <div class="col-sm-10 col-sm-offset-2">
            <button type="button" v-on:click="test" class="btn btn-default">提交</button>
        </div>
    </div>
</template>

<script>
    export default{
        methods:{
            test(){
                alert(this.username);
            }
        }
    }
</script>

user-username.vue内容如下：

<template>
    <div class="form-group">
        <label class="col-sm-2">用户名</label>
        <div class="col-sm-10">
            <input type="text" v-model="username" class="form-control" :placeholder="username">
        </div>
    </div>
</template>

<script>
    export default{
        props:["placeholder"],
        data:function () {
            return {username:"张三"}
        }
    }
</script>

user-login.vue内容如下：

<template>
    <div id="user-login" class="col-md-8 col-md-offset-2">
        <h2 class="text-center">用户登录</h2>
        <form class="form-horizontal" role="form">
            <user-name placeholder="请输入你的用户名"></user-name>
            <user-submit></user-submit>
        </form>
    </div>
</template>

<style>
    @import "./../css/bootstrap.min.css";
    #user-login{
        margin-top: 50px;
    }
</style>

<script>
   import username from "./user/use-name.vue";
   import usersubmit from "./user/user-submit.vue";
    export default{
        components:{
           "user-name":username,
            "user-submit":usersubmit
        }
    }
</script>

至此，界面上还是一样的，只不过点击『提交』按钮，就拿不到用户名文本框的值了

怎么在user-submit组件里，去访问user-name组件呢？

组件访问方式

今天学习最简单的2个访问方式
(1) this.$parent 访问父组件 (2) this.$children 访问子组件（是一个数组）
访问某个子组件，可以用数组[索引]是方式。

用索引的方式太麻烦

vue.js 2.0提供了一个ref 的属性：
可以为子组件指定一个索引id，比如：

则访问时可以：
this.$parent.$refs.uname

<user-name ref="uname" placeholder="请输入你的用户名"></user-name>

user-submit.vue里：

<script>
    export default{
        methods:{
            test(){
                alert(this.$parent.$refs.uname.$data.username);
            }
        }
    }
</script>

ok，这就实现了相邻组件之间的通信。