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標簽中之間根據名字使用即可

案例：