1、關於組件使用方法
ok廢話不多說直接一個簡單的組件實例帶你快速使用組件。
//html代碼
//單頁面使用需要引入文件，這裏引入的是cdn方式
<script src="https://cdn.jsdelivr.net/npm/vue" type="text/javascript"></script>
<body>
<div id="vue_practice">
<h2>組件的基本使用</h2>
<!-- 可用一個變量進行動態賦值。可直接賦值，值可以是數組、字符串、數組等等-->
<!-- 這裏動態綁定的值只能是子組件裏面props裏申明的變量-->
<blog-post :post-title="post.title + ' by ' + post.author.name"></blog-post>
<blog-post :post-title="'字符串'"></blog-post>
<blog-post :post-title="{hhh:'ok'}"></blog-post>
<blog-post :post-title="[123,234]"></blog-post>
</div>
</body>
//子組件的建立
//組件名稱一般使用駝峯命名（短橫線也ok），父組件調用的時候使用短橫線
Vue.component('blogPost', {
props: ['post-title'],//子組件向父組件傳的值
template: '<i style="display:block;margin:20px">{{ postTitle }}</i>'//組件模版
})
//父組件調用
var vue_practice = new Vue({
el: "#vue_practice",
data: {
//組件賦值
post: {
title: '組件的基本使用',
author: {
name: 'Yan_an_n'
},
},
},
});
效果圖如下:
2、父組件和子組件區分
最開始我常常分不清概念到底哪個是父組件、哪個是子組件，後來發現區分其實很容易
父組件：就是調用方，畢竟是爸爸，還是可以對兒子進行調教的嘛哈哈😄
子組件：那當然就是被調用方啦，但是被調用方也是有自己骨氣的，不是自己申明的屬性，父組件也別想使用
3、組件傳值
- 父組件向字組件傳值（props），傳值方式是利用屬性傳值
1、子組件可利用props設置默認值、傳值類型、及一些驗證
//子組件的設置
Vue.component('child',{
props: {
//對象形式設置傳值的更多屬性
content: {
type: String,//傳值類型
required: false, //設置是否必須傳遞
default: 'default value' //設置默認傳遞值 -- 無傳遞時傳遞的默認值
}
},
template: '<div>{{content}}</div>'//模版
})
2、還可設置限制傳遞字符串的長度等等，validator屬性
Vue.component('child',{
props: {
content: {
type: String,
//對傳入屬性通過校驗器要求它的長度必須大於5，若是傳值大於5會報錯
validator: function(value){
return value.length > 5
}
}
},
template: '<div>{{content}}</div>'
})
//父組件就利用v-bind屬性值的方式將值傳給子組件
//模版裏面
<child :content="prac"></child>
//script裏面
var vue_practice = new Vue({
el: "#vue_practice",
data: {
prac:'父組件傳值',
},
methods:{
cli_num(a){
this.aa = a;
alert(this.aa);
}
}
}
- 子組件向父組件傳值（$emit），傳值方式利用方法調用
//子組件申明
Vue.component('child',{
data:{
num:1
},
props: {
num:{
type: Number
}
},
template: '<div @click="to">{{content}}</div>',//模版
methods:{
to(){
this.num++;
this.$emit("has_num", this.num);
}
}
})
//使用方式@has_num即$emit使用方法
<child @has_num="cli_num" :num="aa"></child>
//父組件調用
//在方法裏使用即可
var vue_practice = new Vue({
el: "#vue_practice",
data: {
aa:0
},
methods:{
cli_num(a){
this.aa = a;
alert(this.aa);
}
}
}
4、關於slot
就是在子組件設置一個插槽，而父組件就可隨意在組件內部設置自己想要的內容，具體操作之後在補上
- 組件使用的時候加標籤，調用組件的時候可以加任何東西，若是沒加標籤，調用組件內部價東西會被忽略
- slot使用的作用域，綁定的是父組件的數據
- slot可有默認值，同props設置一樣，若是父組件沒有傳入內容則使用備用內容，否則用傳入的數據即可
- 具名插槽，插槽有具體名稱定義，其實沒名稱的slot，都默認爲default，具名插槽得使用template去綁定纔可以
- 具名插槽可使用縮寫：v-slot:header 可以被重寫爲 #header
commanBanner組件
<div id="comman_banner">
<ul class="banner_list”>
<li v-for="list in bannerList" :key="list">
<a :href="list.url" target="_blank">{{list.name}}</a>
</li>
</ul>
<slot></slot>
<slot name=“title”></slot>
</div>
//組件調用
<comman-banner>
<i class="yu_icon_xinlogo"></I>
<!—具名插槽的使用!—>
<template v-slot:title>
<h1 class="title">Here might be a page title</h1>
</template>
</comman-banner>
- 作用域插槽：使用一個可以複用的模版替換已渲染元素，類似組件的props的用法
- 出現多個插槽，最好基於template去使用，否則作用域會混亂，而且一個組件裏面只能有一個默認插槽否則也會混亂
<div id="left_banner”>
<!—其中leftBanner值是已知值!—>
<slot v-bind:left="leftBanner">
{{ leftBanner.lastName }}
</slot>
</div>
//用法1
<!—其中slotProps值是命名—>
<!—<template v-slot:default="slotProps”>!—>
<!—可以將default去掉!—>
<template v-slot="slotProps">
{{ slotProps.left.lastValue }}
</template>
//用法2，支持es6可以使用解構賦值
<template v-slot="{left:leftcontext}">
{{ leftcontext.lastValue }}
</template>
5、關於項目調用組件切記操作
1、首先需要引入組件例如
//XXXXX組件名字
import XXXXX from "@/xxx/xxxx/xxx";
2、需要對組件進行申明
export default {
components: { XXXXX, XXXXX, XXXXX },
}
例子均作者實操作過，簡單使用組件還是夠了的，之後會根據實際再補充。