Vue学习笔记17-定义多组件

前言：
我们把组件单独拿出来，写在其他文件夹中，然后在一个index.html中去调用它们。

1.在src/js下新建login.js和register.js:

• 目录结构：
  
• login.js里面添加登录组件的代码：

const loginForm = {   //组件内的template只能有一个跟标签
    template: `
        <div>
            <h1>登录页</h1>
            用户名：<input type="text" ><br>
            密码：<input type="password"><br>
            <input type="button" value="登陆">  
        </div>
    
    `
}

• register.js里面添加注册组件的代码：

const registerForm = {  //组件内的template只能有一个跟标签
    template: `  
        <div>
            <h1>注册页</h1>
            用户名：<input type="text" ><br>
            密码：<input type="password"><br>
            确认密码：<input type="password"><br>
            <input type="button" value="注册">  
        </div>
    `
}

2.在src下新建index.html：

• 引入组件和Vue.js：

<script src="../node_modules/vue/dist/vue.js"></script>
<script src="js/register.js"></script>
<script src="js/login.js"></script>

• 创建Vue实例：

<script>
    const app = new Vue({
        el: "#app",
        components: {
            loginForm,              //组件名称
            registerForm
    }
    });
</script>

• html模板代码：

<div id="app">
        <span>登录</span>
        <span>注册</span>
        <hr>
        <login-form></login-form>         //调用组件。使用-来识别后面的一个字母为大写。类似java的下划线
        <register-form></register-form>
</div>

3.运行代码：

• 成功引用组件。
• 但是我们要实现点击登录只显示登录的组件，点击注册只显示注册的组件。这时就需要用到路由（见下章）。