## Vue組件的基本使用
### [](https://gitee.com/wmlzofia/learn/blob/master/vue/%E7%BB%84%E4%BB%B6.md#1%E7%88%B6-%E5%AD%90%E7%BB%84%E4%BB%B6%E7%9A%84%E9%80%9A%E4%BF%A1)1.父->子組件的通信
#### [](https://gitee.com/wmlzofia/learn/blob/master/vue/%E7%BB%84%E4%BB%B6.md#11-%E5%88%9B%E5%BB%BA%E5%AD%90%E7%BB%84%E4%BB%B6-showmessagevue)1.1 創建子組件 ShowMessage.vue
~~~
props 定義子組件接受數據
~~~
~~~
<template>
<div>
<p>{{content}}</p>
</div>
</template>
props: {
content: {
type: String,
required: true,
default: "123"
}
}
~~~
#### [](https://gitee.com/wmlzofia/learn/blob/master/vue/%E7%BB%84%E4%BB%B6.md#12-%E5%88%9B%E5%BB%BA%E7%88%B6%E7%BB%84%E4%BB%B6)1.2 創建父組件
~~~
1 import引入 2 components定義 3 標簽內使用使用
~~~
~~~
<template>
<div>
<show-message :content="content"></show-message>
</div>
</template>
<script>
import ShowMessage from './ShowMessage.vue';
export default {
components: {
ShowMessage,
},
data() {
return {
title: "嘻嘻嘻",
content: "我是嘻嘻嘻嘻",
}
}
}
</script>
<style scoped>
</style>
~~~
### [](https://gitee.com/wmlzofia/learn/blob/master/vue/%E7%BB%84%E4%BB%B6.md#2%E5%AD%90---%E7%88%B6-%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1)2.子 -> 父 組件通信
#### [](https://gitee.com/wmlzofia/learn/blob/master/vue/%E7%BB%84%E4%BB%B6.md#21-%E5%88%9B%E5%BB%BA%E5%AD%90%E7%BB%84%E4%BB%B6-counteroperationvue)2.1 創建子組件 CounterOperation.vue
~~~
emits 定義傳遞的方法 父組件接收
this.$emit("add"); 執行傳遞
~~~
當點擊 -1操作時 激活increment 方法 傳遞 this.$emit("sub"); 到父組件
~~~
<template>
<div>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
<input type="text" v-model.number="num">
<button @click="incrementN">+n</button>
</div>
</template>
<script>
export default {
emits: ["add", "sub", "addN"],
data() {
return {
num: 0
}
},
methods: {
increment() {
this.$emit("add");
},
decrement() {
this.$emit("sub");
},
incrementN() {
this.$emit('addN', this.num, "why", 18);
}
}
}
</script>
<style scoped>
</style>
~~~
#### [](https://gitee.com/wmlzofia/learn/blob/master/vue/%E7%BB%84%E4%BB%B6.md#22-%E5%AE%9A%E4%B9%89%E7%88%B6%E7%BB%84%E4%BB%B6)2.2 定義父組件
1.標簽內接收@add 調用 addOne事件 2然后執行相應操作
~~~
<template>
<div>
<h2>當前計數: {{counter}}</h2>
<counter-operation @add="addOne"
@sub="subOne"
@addN="addNNum">
</counter-operation>
</div>
</template>
<script>
import CounterOperation from './CounterOperation.vue';
export default {
components: {
CounterOperation
},
data() {
return {
counter: 0
}
},
methods: {
addOne() {
this.counter++
},
subOne() {
this.counter--
},
addNNum(num, name, age) {
console.log(name, age);
this.counter += num;
}
}
}
</script>
<style scoped>
</style>
~~~
### [](https://gitee.com/wmlzofia/learn/blob/master/vue/%E7%BB%84%E4%BB%B6.md#3-%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6-%E5%AE%9E%E4%BE%8B-%E9%A1%B5%E9%9D%A2%E5%88%87%E6%8D%A2)3 父子組件 實例 頁面切換
父頁面
~~~
<template>
<div>
<tab-control :titles="titles" @titleClick="titleClick"></tab-control>
<h2>{{contents[currentIndex]}}</h2>
</div>
</template>
<script>
import TabControl from './TabControl.vue';
export default {
components: {
TabControl
},
data() {
return {
titles: ["衣服", "鞋子", "褲子"],
contents: ["衣服頁面", "鞋子頁面", "褲子頁面"],
currentIndex: 0
}
},
methods: {
titleClick(index) {
this.currentIndex = index;
}
}
}
</script>
<style scoped>
</style>
~~~
子頁面
~~~
<template>
<div class="tab-control">
<div class="tab-control-item"
:class="{active: currentIndex === index}"
v-for="(title, index) in titles"
:key="title"
@click="itemClick(index)">
<span>{{title}}</span>
</div>
</div>
</template>
<script>
export default {
emits: ["titleClick"],
props: {
titles: {
type: Array,
default() {
return []
}
}
},
data() {
return {
currentIndex: 0
}
},
methods: {
itemClick(index) {
this.currentIndex = index;
this.$emit("titleClick", index);
}
}
}
</script>
<style scoped>
.tab-control {
display: flex;
}
.tab-control-item {
flex: 1;
text-align: center;
}
.tab-control-item.active {
color: red;
}
.tab-control-item.active span {
border-bottom: 3px solid red;
padding: 5px 10px;
}
</style>
~~~
### [](https://gitee.com/wmlzofia/learn/blob/master/vue/%E7%BB%84%E4%BB%B6.md#4%E9%9D%9E%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6-%E4%B9%8B%E9%97%B4%E9%80%9A%E4%BF%A1)4非父子組件 之間通信
#### [](https://gitee.com/wmlzofia/learn/blob/master/vue/%E7%BB%84%E4%BB%B6.md#41-%E7%88%B6%E7%BB%84%E4%BB%B6---%E5%AD%90%E5%AD%99%E7%BB%84%E4%BB%B6)4.1 父組件 -> 子、孫組件
~~~
父組件 provide 里面時提供給 子組件的數據
這里使用計算屬性 是為了 實時顯示子組件數據
~~~
~~~
<template>
<div>
<home></home>
<button @click="addName">+name</button>
</div>
</template>
<script>
import Home from './Home.vue';
import { computed } from 'vue';
export default {
components: {
Home
},
provide() {
return {
name: "why",
age: 18,
length: computed(() => this.names.length) // ref對象 .value
}
},
data() {
return {
names: ["abc", "cba", "nba"]
}
},
methods: {
addName() {
this.names.push("why");
console.log(this.names);
}
}
}
</script>
<style scoped>
</style>
~~~
~~~
子組件 inject接收父組件傳來的數據
~~~
~~~
<template>
<div>
HomeContent: {{name}} - {{age}} - {{length.value}}
</div>
</template>
<script>
export default {
inject: ["name", "age", "length"],
}
</script>
<style scoped>
</style>
~~~
### [](https://gitee.com/wmlzofia/learn/blob/master/vue/%E7%BB%84%E4%BB%B6.md#5%E4%BA%8B%E4%BB%B6%E6%80%BB%E7%BA%BF%E7%9A%84%E4%BD%BF%E7%94%A8)5事件總線的使用
~~~
5.1 安裝
~~~
~~~
npm install mitt
使用
import mitt from 'mitt';
const emitter = mitt();
export default emitter;
~~~
~~~
5.2 emitter.emit發射數據
~~~
~~~
import emitter from './utils/eventbus';
export default {
methods: {
btnClick() {
console.log("about按鈕的點擊");
emitter.emit("why", {name: "why", age: 18});
// emitter.emit("kobe", {name: "kobe", age: 30});
}
}
}
~~~
~~~
5.3 emitter.on 接收數據
~~~
~~~
import emitter from './utils/eventbus';
export default {
created() {
emitter.on("why", (info) => {
console.log("why:", info);
});
emitter.on("kobe", (info) => {
console.log("kobe:", info);
});
emitter.on("*", (type, info) => {
console.log("* listener:", type, info);
})
}
}
~~~
### [](https://gitee.com/wmlzofia/learn/blob/master/vue/%E7%BB%84%E4%BB%B6.md#%E6%8F%92%E6%A7%BD%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8)插槽的基本使用
~~~
子組件中 定義插槽名name=""
~~~
~~~
<template>
<div class="left">
<slot name="left"></slot>
</div>
<div class="center">
<slot name="center"></slot>
</div>
<div class="right">
<slot name="right"></slot>
</div>
<div class="addition">
<slot :name="name"></slot>
</div>
</template>
<script>
export default {
props: {
name: String
}
// data() {
// return {
// name: "why"
// }
// }
}
</script>
~~~
~~~
父組件 #
~~~
~~~
<template>
<div>
<nav-bar :name="name">
<template #left>
<button>左邊的按鈕</button>
</template>
<template #center>
<h2>我是標題</h2>
</template>
<template #right>
<i>右邊的i元素</i>
</template>
<template #[name]>
<i>why內容</i>
</template>
</nav-bar>
</div>
</template>
<script>
import NavBar from './NavBar.vue';
export default {
components: {
NavBar
},
data() {
return {
name: "why"
}
}
}
</script>
<style scoped>
</style>
~~~
- 文檔說明
- 開始
- linux
- 常用命令
- ps -ef
- lsof
- netstat
- 解壓縮
- 復制
- 權限
- 其他
- lnmp集成安裝
- supervisor
- 安裝
- supervisor進程管理
- nginx
- 域名映射
- 負載均衡配置
- lnmp集成環境安裝
- nginx源碼安裝
- location匹配
- 限流配置
- 日志配置
- 重定向配置
- 壓縮策略
- nginx 正/反向代理
- HTTPS配置
- mysql
- navicat創建索引
- 設置外網鏈接mysql
- navicat破解
- sql語句學習
- 新建mysql用戶并賦予權限
- php
- opcache
- 設計模式
- 在CentOS下安裝crontab服務
- composer
- 基礎
- 常用的包
- guzzle
- 二維碼
- 公共方法
- 敏感詞過濾
- IP訪問頻次限制
- CURL
- 支付
- 常用遞歸
- 數據排序
- 圖片相關操作
- 權重分配
- 毫秒時間戳
- base64<=>圖片
- 身份證號分析
- 手機號相關操作
- 項目搭建 公共處理函數
- JWT
- 系統函數
- json_encode / json_decode 相關
- 數字計算
- 數組排序
- php8
- jit特性
- php8源碼編譯安裝
- laravel框架
- 常用artisan命令
- 常用查詢
- 模型關聯
- 創建公共方法
- 圖片上傳
- 中間件
- 路由配置
- jwt
- 隊列
- 定時任務
- 日志模塊
- laravel+swoole基本使用
- 拓展庫
- 請求接口log
- laravel_octane
- 微信開發
- token配置驗證
- easywechart 獲取用戶信息
- 三方包
- webman
- win下熱更新代碼
- 使用laravel db listen 監聽sql語句
- guzzle
- 使用workman的httpCLient
- 修改隊列后代碼不生效
- workman
- 安裝與使用
- websocket
- eleticsearch
- php-es 安裝配置
- hyperf
- 熱更新
- 安裝報錯
- swoole
- 安裝
- win安裝swoole-cli
- google登錄
- golang
- 文檔地址
- 標準庫
- time
- 數據類型
- 基本數據類型
- 復合數據類型
- 協程&管道
- 協程基本使用
- 讀寫鎖 RWMutex
- 互斥鎖Mutex
- 管道的基本使用
- 管道select多路復用
- 協程加管道
- beego
- gin
- 安裝
- 熱更新
- 路由
- 中間件
- 控制器
- 模型
- 配置文件/conf
- gorm
- 初始化
- 控制器 模型查詢封裝
- 添加
- 修改
- 刪除
- 聯表查詢
- 環境搭建
- Windows
- linux
- 全局異常捕捉
- javascript
- 常用函數
- vue
- vue-cli
- 生產環境 開發環境配置
- 組件通信
- 組件之間通信
- 父傳子
- 子傳父
- provide->inject (非父子)
- 引用元素和組件
- vue-原始寫法
- template基本用法
- vue3+ts項目搭建
- vue3引入element-plus
- axios 封裝網絡請求
- computed 計算屬性
- watch 監聽
- 使用@符 代替文件引入路徑
- vue開發中常用的插件
- vue 富文本編輯
- nuxt
- 學習筆記
- 新建項目踩坑整理
- css
- flex布局
- flex PC端基本布局
- flex 移動端基本布局
- 常用css屬性
- 盒子模型與定位
- 小說分屏顯示
- git
- 基本命令
- fetch
- 常用命令
- 每次都需要驗證
- git pull 有沖突時
- .gitignore 修改后不生效
- 原理解析
- tcp與udp詳解
- TCP三次握手四次揮手
- 緩存雪崩 穿透 更新詳解
- 內存泄漏-內存溢出
- php_fpm fast_cgi cig
- redis
- 相關三方文章
- API對外接口文檔示范
- elaticsearch
- 全文檢索
- 簡介
- 安裝
- kibana
- 核心概念 索引 映射 文檔
- 高級查詢 Query DSL
- 索引原理
- 分詞器
- 過濾查詢
- 聚合查詢
- 整合應用
- 集群
- docker
- docker 簡介
- docker 安裝
- docker 常用命令
- image 鏡像命令
- Contrainer 容器命令
- docker-compose
- redis 相關
- 客戶端安裝
- Linux 環境下安裝
- uni
- http請求封裝
- ios打包
- 視頻縱向播放
- 日記
- 工作日記
- 情感日志
- 壓測
- ab
- ui
- thorui
- 開發規范
- 前端
- 后端
- 狀態碼
- 開發小組未來規劃