沒有搭建腳手架時(shí)vue組件的使用方式

更新時(shí)間：2023年10月31日 09:16:42 作者：越來越好。

這篇文章主要介紹了沒有搭建腳手架時(shí)vue組件的使用方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

沒有搭建腳手架時(shí)vue組件的使用

全局組件

//全局組件 第一種聲名方式
var s = Vue.extend({
template: "<h6>全局組件 第一種聲名方式</h6>"
})
Vue.component("hello", s);
//前臺(tái)標(biāo)簽調(diào)用 <hello></hello>
//全局組件 第二種聲明方式
Vue.component("k", {
template: "<h6>全局組件 第二種聲明方式</h6>"
});
//前臺(tái)標(biāo)簽調(diào)用 <k></k>

局部組件

components: {
//局部組件，聲明方式1
    zujian1: {
        template: "<h6>局部組件，聲明方式</h6>" //因?yàn)槁暶鞯氖亲址苯诱{(diào)用 <zujian1></zujian1>
    },
//局部組件，聲明方式2
    zujian2: {
        template: "#zujian2",
            data() {
                return {
                    msg: "組件2的值"
                    }
                }            
            },
}
//第二種調(diào)用方式
//因?yàn)槁暶鞯牟皇亲址圆荒苤苯邮褂?需要通過標(biāo)簽<template id="zujian2"></template> 標(biāo)簽之間必須要用html標(biāo)簽
如<template id="zujian2"><div>{{msg}}</div></template> 不能沒有html標(biāo)簽就直接調(diào)用
 
<head>
    <template id="zujian2">  //此處要加上組件的id
        <p>{{msg}}</p>
     </template>
<body>
    <!--頁面容器-->
    <div id="my" class="container" v-cloak>
        <div class="container">
            <hello></hello>
            <k></k>
            <zujian1></zujian1>
            <zujian2></zujian2> /*為空的時(shí)候不能使用，必須要用到模板*/
        </div>
    </div>
</body>
</head>

vue腳手架—組件的使用

為什么用組件

在這里插入圖片描述

需求：想要多個(gè)收起展開的部分

方法1：復(fù)制代碼

代碼重復(fù)
冗余不利于維護(hù)

<template>
  <div id="app">
    <!-- 目標(biāo):點(diǎn)擊展開或收起時(shí)，把內(nèi)容區(qū)域顯示或者隱藏 -->
    <h3>折疊面板</h3>
    <div>
      <div class="title">
        <h4>芙蓉樓送辛漸</h4>
        <span @click="isShow = !isShow">{{ isShow ? '收起' : '展開' }}</span>
      </div>
      <div class="container" v-show="isShow">
        <p>一片冰心在玉壺</p>
        <p>一片冰心在玉壺</p>
        <p>一片冰心在玉壺</p>
        <p>一片冰心在玉壺</p>
      </div>
    </div>
    <!-- 復(fù)制 -->
    <div>
      <div class="title">
        <h4>芙蓉樓送辛漸</h4>
        <span @click="isShow1 = !isShow1">{{ isShow1 ? '收起' : '展開' }}</span>
      </div>
      <div class="container" v-show="isShow1">
        <p>一片冰心在玉壺</p>
        <p>一片冰心在玉壺</p>
        <p>一片冰心在玉壺</p>
        <p>一片冰心在玉壺</p>
      </div>
    </div>
    <!-- 復(fù)制 -->
    <div>
      <div class="title">
        <h4>芙蓉樓送辛漸</h4>
        <span @click="isShow2 = !isShow2">{{ isShow2 ? '收起' : '展開' }}</span>
      </div>
      <div class="container" v-show="isShow2">
        <p>一片冰心在玉壺</p>
        <p>一片冰心在玉壺</p>
        <p>一片冰心在玉壺</p>
        <p>一片冰心在玉壺</p>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      isShow: false,
      isShow1: false,
      isShow2: false,
    }
  },
}
</script>


<style scoped>
#app {
  width: 400px;
  margin: 20px auto;
  background-color: yellow;
  border: 4px solid burlywood;
  border-radius: 2px;
  padding: 10px;
}
h3 {
  text-align: center;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
  padding: 0 5px;
}
</style>

vue 組件-概念

可復(fù)用的vue實(shí)例，封裝標(biāo)簽，樣式和代碼

組件化：封裝的思想，把頁面上可復(fù)用的部分，封裝為組件，從而方便項(xiàng)目的開發(fā)和維護(hù)

一個(gè)頁面，可以拆分成一個(gè)個(gè)組件（一個(gè)vue文件），一個(gè)組件就是一個(gè)整體，每個(gè)組件可以有自己獨(dú)立的結(jié)構(gòu)，樣式和行為(html,css,js)

請?zhí)砑訄D片描述

vue組件–基礎(chǔ)使用

每個(gè)組件都是一個(gè)獨(dú)立的個(gè)體，代碼里體現(xiàn)為一個(gè)獨(dú)立的vue文件

哪部分標(biāo)簽復(fù)用，就把哪部分封裝到組件內(nèi)

組件內(nèi)template只能有一個(gè)標(biāo)簽
組件內(nèi)的data必須是一個(gè)函數(shù)，獨(dú)立作用域

步驟：

1.創(chuàng)建組件

創(chuàng)建組件 components/Pannel.vue

封裝結(jié)構(gòu)+樣式+js 組件都是獨(dú)立的，為了復(fù)用

<template>
  <div>
    <div class="title">
      <h4>芙蓉樓送辛漸</h4>
      <span @click="isShow = !isShow">{{ isShow ? '收起' : '展開' }}</span>
    </div>
    <div class="container" v-show="isShow">
      <p>一片冰心在玉壺</p>
      <p>一片冰心在玉壺</p>
      <p>一片冰心在玉壺</p>
      <p>一片冰心在玉壺</p>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      isShow: false,
    }
  },
}
</script>


<style scoped>
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
  padding: 0 5px;
}
</style>

2.注冊組件

注冊組件，創(chuàng)建后需要注冊后再使用

全局注冊使用

全局入口main.js 在new Vue之上注冊

語法：

// 全局注冊組件
// 1 引入組件
import Pannel from './components/Pannel'
// 2 全局注冊組件
/* 
 Vue.component('組件名',組件對象)
*/
Vue.component('PannelG', Pannel)

全局注冊組件PannelG，就可以當(dāng)做標(biāo)簽在任意vue文件中的template中使用

單雙標(biāo)簽都可以或者小寫加 - 形式，運(yùn)行后，會(huì)把這個(gè)自定義標(biāo)簽當(dāng)做組件解析，使用組件里封裝的標(biāo)簽替換到這個(gè)位置

    <PannelG></PannelG>
    <PannelG />
    <pannel-g></pannel-g>

局部注冊使用

語法

import 組件對象 from 'vue文件路徑'

export default {
    components：{
        '組件名':組件對象
    }
}

在vue文件中引入，注冊，使用

<template>
  <div id="app">

    <hr />
    <MyPannel></MyPannel>
    <my-pannel></my-pannel>
  </div>
</template>

<script>
// 1引入組件
import MyPannel from './components/MyPannel.vue'
export default {
  //2 局部注冊組件
  components: {
    MyPannel: MyPannel,
  },
}
</script>

組件使用總結(jié)：