24 vue之组件的使用+导出导入语法

一、组件的使用

1 每个组件都有三部分

<template>写html内容，原来组件的template</template>
<script> js,data,methods,created,</script>
<style>样式</style>

注意：写的html要在div中，不然可能会报错

2 页面组件的使用步骤

-新建一个 xx.vue,默认生成了三部分
    -在<template>写html，学的vue的插值，指令，事件。。。
    -在<script>写js，学的data，methods，。。。。
    -在<style>中写样式，之前学的css
    
    -想访问某个路径，就能够显示这个页面组件
        -router--->index.js--->在const routes = []数组中加对象
        -{
            path: '/',  # 访问的路径
            name: 'Home',# 名字
            component: Home # 组件对象，导入的
            }
        -import 起个名字 from '../views/UserDetail.vue'

2.1 在views下新建一个Login.vue组件

 

 Login.vue

<template>
    <div>
        <p>username:<input type="text" v-model="username"></p>
        <p>password:<input type="text" v-model="password"></p>
        <p><button @click="handleclick" :divclass="red">登录</button></p>
    </div>
</template>

<script>
    export default {
        name: "Login.vue",
        data:{
            username:"username",
            password:'password',
            divclass:['red']
        },
        methods:{
            handleclick(){
                alert(this.username+this.password)
            }
        }
    }
</script>

<style scoped>
    .red{
        background-color: red;
        font-size: 40px;
    }

</style>

复制粘贴到about.vue,访问出现如下界面

 

 二、导出导入语法

-导出语法

export default {'showName': showName, 'name': name}

-导入：

import Lqz from '../lqz'        // Lqz代指的就是导出的对象，以后使用Lqz. 调用即可

-文件夹下如果有index.js 导入的时候，就不需要写 index.js,导到包这一层就可以了

案例：

1 导出

1.1 在src下新建htt文件夹

1.2 在htt文件夹下新建aa.js文件

let name='彭于洋'

function showName(){
    console.log(name)
}
export default {'showName':showName,'name':name}

2 导入

About.vue

<template>
    <div>
        <p>username:<input type="text" v-model="username"></p>
        <p>password:<input type="text" v-model="password"></p>
        <p><button @click="handleclick" :class="buttonClass">登录</button></p>
    </div>
</template>

<script>
    import aa from '../htt/aa.js'
    export default {
        name: "Login.vue",
        data(){
            return{
                 username:"",
                   password:'',
                   buttonClass:['red']
            }
        },


        methods:{
            handleclick(){
                aa.showName()
                alert(aa.name)
                // alert(this.username+this.password)
            }
        }
    }
</script>

<style scoped>
    .red{
        background-color: red;
        font-size: 40px;
    }

</style>

 

 

 

 -文件夹下如果有index.js   导入的时候，就不需要写 index.js,导到包这一层就可以了

 import aa from '../htt'

  三、在页面中引入其他组件

-编写一个xx.vue ,写好html，css，js
-在要使用的地方，导入，注册
import Header from "../components/Header";
components:{
Header
}
-在templates标签中之间根据名字使用即可

案例：