組件通訊
1.ref屬性（也可以實(shí)現(xiàn)組件間通信：子和父都可以實(shí)現(xiàn)通信）
- ref放在
標(biāo)簽上，拿到的是原生的DOM節(jié)點(diǎn) - ref放在
組件上，拿到的是組件對(duì)象?，對(duì)象中的數(shù)據(jù)、函數(shù) 都可以直接使用 - 通過(guò)這種方式實(shí)現(xiàn)子傳父（this.$refs.mychild.text）
- 通過(guò)這種方式實(shí)現(xiàn)父?jìng)髯樱ㄕ{(diào)用子組件方法傳參數(shù)）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子傳父</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
<input type="text" ref="myRef">
<button @click="handleButton">點(diǎn)我</button>
</div>
</body>
<script>
// 創(chuàng)建1個(gè)組件對(duì)象（全局組件/子組件）
Vue.component('global', {
template: `
<div>
<input type="text" v-model="myText">
</div>
`,
data() {
return {
myText: ''
}
},
methods: {
handleClick() {
this.$emit('my_event', this.myText)
this.$emit('my_event', this.innerHTML)
}
}
})
// 父組件
let vm = new Vue({
el: '#box',
data: {
name: ''
},
methods: {
handleShow(a) {
this.name = a
},
handleButton() {
console.log(this.$refs)
console.log(this.$refs.myRef)
console.log(this.$refs.myRef.value)
}
}
})
</script>
</html>
2.事件總線（不同層級(jí)的不同組件通信）
原本的通信方式
事件總線的通信方式
實(shí)例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子傳父</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
<global1></global1>
<hr>
<global2></global2>
</div>
</body>
<script>
// 定義1個(gè)事件總線
let bus = new Vue({})
// 組件1
Vue.component('global1', {
template: `
<div>
<h3>組件1</h3>
<input type="text" v-model="myText">
<button @click="handleClick1">點(diǎn)我傳遞數(shù)據(jù)到另一個(gè)組件</button>
</div>
`,
data() {
return {
myText: ''
}
},
methods: {
handleClick1() {
console.log(this.myText)
bus.$emit('any', this.myText) // 通過(guò)事件總線發(fā)送
}
}
})
// 組件2
Vue.component('global2', {
template: `
<div>
<h3>組件2</h3>
收到的消息是：{{recvText}}
</div>
`,
data() {
return {
recvText: ''
}
},
mounted() { // 組件的掛載（生命周期鉤子函數(shù)中的1個(gè)），開始監(jiān)聽時(shí)間總線上的：any
bus.$on('any', (item) => {
console.log('收到了', item,)
this.recvText = item
})
},
methods: {}
})
// 父組件
let vm = new Vue({
el: '#box',
data: {},
})
</script>
</html>
動(dòng)態(tài)組件
1.基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動(dòng)態(tài)組件</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
<ul>
<li>
<button @click="who='child1'">首頁(yè)</button>
</li>
<li>
<button @click="who='child2'">訂單</button>
</li>
<li>
<button @click="who='child3'">商品</button>
</li>
</ul>
<component :is="who"></component>
</div>
</body>
<script>
let vm = new Vue({
el: '#box',
data: {
who: 'child1'
},
components: {
child1: {
template: `
<div>
<span style="border-bottom: 5px solid rgba(255,104,104,0.7)">我是首頁(yè)</span>
</div>
`,
},
child2: {
template: `
<div>
<span style="border-bottom: 5px solid rgba(255,104,255,0.7)">我是訂單</span>
</div>
`,
},
child3: {
template: `
<div>
<span style="border-bottom: 5px solid rgba(104,255,104,0.7)">我是商品</span>
</div>
`,
}
}
})
</script>
</html>
2.keep-alive的使用
keep-alive可以讓輸入框內(nèi)有的內(nèi)容一致保持，不會(huì)因?yàn)榍袚Q而重置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<ul>
<li>
<button @click="who='child1'">首頁(yè)</button>
</li>
<li>
<button @click="who='child2'">訂單</button>
</li>
<li>
<button @click="who='child3'">商品</button>
</li>
</ul>
<keep-alive>
<component :is="who"></component>
</keep-alive>
</div>
</body>
<script>
let vm = new Vue({
el: '#box',
data: {
who: 'child1'
},
components: {
child1: {
template: `
<div>
<span style="border-bottom: 5px solid rgba(255,104,104,0.7)">我是首頁(yè)</span>
<input type="text">
</div>
`,
},
child2: {
template: `
<div>
<span style="border-bottom: 5px solid rgba(255,104,255,0.7)">我是訂單</span>
<input type="text">
</div>
`,
},
child3: {
template: `
<div>
<span style="border-bottom: 5px solid rgba(104,255,104,0.7)">我是商品</span>
<input type="text">
</div>
`,
}
}
})
</script>
</html>
slot 插槽
- 一般情況下，編寫完1個(gè)組件之后，組件的內(nèi)容都是寫死的，需要加數(shù)據(jù) 只能去組件中修改，擴(kuò)展性很差
- 然后就出現(xiàn)了插槽這個(gè)概念，只需在組件中添加
<slot></slot>，就可以在body的組件標(biāo)簽中添加內(nèi)容
1.基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slot 插槽</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
<child>
<h6>Hello World</h6>
</child>
</div>
</body>
<script>
let vm = new Vue({
el: '#box',
data: {
who: 'child1'
},
components: {
child: {
template: `
<div>
<slot></slot>
<span style="border-bottom: 5px solid rgba(255,104,104,0.7)">我是組件的原內(nèi)容</span>
<slot></slot>
</div>
`,
},
}
})
</script>
</html>
2.小案例（通過(guò)插槽實(shí)現(xiàn)在1個(gè)組件中控制另1個(gè)組件的顯示隱藏）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slot 插槽</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
<!--通過(guò)插槽實(shí)現(xiàn)在一個(gè)組件中控制另一個(gè)組件的顯示隱藏-->
<child1>
<button @click="isShow=!isShow">顯示/隱藏組件2</button>
</child1>
<child2 v-if="isShow"></child2>
</div>
</body>
<script>
Vue.component('child1', {
template: `<div>
組件1
<slot></slot>
</div>`,
})
Vue.component('child2', {
template: `<div>
<h3>組件2</h3>
</div>`,
})
var vm = new Vue({
el: '#box',
data: {
isShow: true
}
})
</script>
</html>
3.具名插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>具名插槽</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
<!-- 具名插槽，把p標(biāo)簽給a插槽，div標(biāo)簽給b插槽-->
<child>
<p slot="a">我是具名插槽a插入的內(nèi)容</p>
<div slot="b">我是具名插槽b插入的內(nèi)容</div>
</child>
</div>
</body>
<script>
Vue.component('child', {
template: `<div>
<slot name="a"></slot>
<hr>
<span style="border-bottom: 5px solid rgba(255,104,104,0.7)">我是組件的原內(nèi)容</span>
<hr>
<slot name="b"></slot>
</div>`,
})
var vm = new Vue({
el: '#box',
data: {}
})
</script>
</html>
可以指定標(biāo)簽放在某個(gè)插槽的位置
自定義組件的封裝
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" >
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<style>
.swiper-container {
width: 600px;
height: 200px;
}
</style>
</head>
<body>
<div id="box">
<swipper>
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="data in dataList1"><h1 style="text-align: center">{{data}}</h1></div>
</div>
</swipper>
<swipper :key="dataList2.length">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="data in dataList2"><h1 style="text-align: center">{{data}}</h1></div>
</div>
</swipper>
</div>
</body>
<script>
Vue.component('swipper', {
template: `
<div>
<div class="swiper-container">
<slot></slot>
<div class="swiper-pagination"></div>
</div>
</div>
`,
mounted() {
// 每次更新都會(huì)執(zhí)行該代碼，會(huì)耗費(fèi)資源
let mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal', // 垂直切換選項(xiàng)
loop: true, // 循環(huán)模式選項(xiàng)
// 如果需要分頁(yè)器
pagination: {
el: '.swiper-pagination',
},
})
}
})
let vm = new Vue({
el: '#box',
data: {
dataList1: [],
dataList2: []
},
mounted() {
setTimeout(() => {
this.dataList1 = ['11111', '22222', '33333']
this.dataList2 = ['66666', '77777', '88888']
}, 3000)
},
})
</script>
</html>
自定義指令
1.基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定義指令 基本使用</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
<div v-mystyle>我是1個(gè)DIV</div>
</div>
</body>
<script>
// 自定義指令，使用的時(shí)候 v-自定義指令名
Vue.directive('mystyle', {
inserted(ev) { // 在標(biāo)簽上使用這個(gè)指令，就會(huì)觸發(fā) inserted
console.log('我執(zhí)行了')
}
})
let vm = new Vue({
el: '#box'
})
</script>
</html>
2.讓所有使用自定義指令的標(biāo)簽背景都變紅色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定義指令 基本使用</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
<div v-mystyle>我是1個(gè)DIV</div>
<br>
<div v-mystyle>我也是1個(gè)DIV</div>
</div>
</body>
<script>
// 自定義指令，使用的時(shí)候 v-自定義指令名
Vue.directive('mystyle', {
inserted(ev) { // 在標(biāo)簽上使用這個(gè)指令，就會(huì)觸發(fā) inserted
ev.style.background='red'
}
})
let vm = new Vue({
el: '#box'
})
</script>
</html>
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-789926.html
3.用戶指定自定義指令的背景色,修改變量，背景變化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定義指令</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
<!-- <div v-mystyle>我是1個(gè)DIV</div>-->
<div v-mystyle>我是1個(gè)DIV</div>
<div v-mystyle="'red'">我是1個(gè)DIV</div>
<div v-mystyle="'green'">我是1個(gè)DIV</div>
<div v-mystyle="'blue'">我是1個(gè)DIV</div>
<div v-mystyle="myColor">我是1個(gè)DIV</div>
</div>
</body>
<script>
Vue.directive('mystyle', {
inserted(ev, color) { // 這里的ev就是DOM對(duì)象
console.log(ev)
console.log(color)
ev.style.backgrond = color.value
},
updated(el, color) {
el.style.background = color.value
}
})
let vm = new Vue({
el: '#box',
data: {
myColor: 'purple'
}
})
</script>
</html>
過(guò)濾器
json數(shù)據(jù)：film.json
{
"coming": [
{
"id": 1240838,
"haspromotionTag": false,
"img": "http://p1.meituan.net/w.h/movie/38dd31a0e1b18e1b00aeb2170c5a65b13885486.jpg",
"version": "",
"nm": "除暴",
"preShow": false,
"sc": 8.6,
"globalReleased": true,
"wish": 76513,
"star": "王千源,吳彥祖,春夏",
"rt": "2020-11-20",
"showInfo": "今天50家影院放映79場(chǎng)",
"showst": 3,
"wishst": 0,
"comingTitle": "11月20日 周五"
},
{
"id": 1228788,
"haspromotionTag": false,
"img": "http://p0.meituan.net/w.h/movie/b16c1c0d5ac9e743c6ffbbf7eba900522725807.jpg",
"version": "",
"nm": "一秒鐘",
"preShow": false,
"sc": 8.6,
"globalReleased": true,
"wish": 54493,
"star": "張譯,劉浩存,范偉",
"rt": "2020-11-27",
"showInfo": "今天11家影院放映12場(chǎng)",
"showst": 3,
"wishst": 0,
"comingTitle": "11月27日 周五"
},
{
"id": 1358968,
"haspromotionTag": false,
"img": "http://p0.meituan.net/w.h/movie/d33858dbfc207da3b36c0dc7fff7a8bb2028677.jpg",
"version": "",
"nm": "汪汪隊(duì)立大功之超能救援",
"preShow": false,
"sc": 8.3,
"globalReleased": true,
"wish": 24833,
"star": "楊鷗,韓嬌嬌,李敏妍",
"rt": "2020-11-13",
"showInfo": "今天5家影院放映7場(chǎng)",
"showst": 3,
"wishst": 0,
"comingTitle": "11月13日 周五"
},
{
"id": 345809,
"haspromotionTag": false,
"img": "http://p1.meituan.net/w.h/moviemachine/7c4ba9633635503044a8f8fb6426aa8d416264.jpg",
"version": "v2d imax",
"nm": "隱形人",
"preShow": false,
"sc": 8.4,
"globalReleased": true,
"wish": 9894,
"star": "伊麗莎白·莫斯,奧利弗·杰森-科恩,阿爾迪斯·霍吉",
"rt": "2020-12-04",
"showInfo": "今天21家影院放映30場(chǎng)",
"showst": 3,
"wishst": 0,
"comingTitle": "12月4日 周五"
},
{
"id": 1330790,
"haspromotionTag": false,
"img": "http://p0.meituan.net/w.h/movie/88e54f3e670789ba1f08e48a5f1170c1188102.jpg",
"version": "",
"nm": "明天你是否依然愛我",
"preShow": false,
"sc": 0,
"globalReleased": false,
"wish": 217699,
"star": "楊穎,李鴻其,黃柏鈞",
"rt": "2020-12-24",
"showInfo": "2020-12-24 下周四上映",
"showst": 4,
"wishst": 0,
"comingTitle": "12月24日 周四"
},
{
"id": 1277751,
"haspromotionTag": false,
"img": "http://p0.meituan.net/w.h/movie/303c2e671cc4df875c151d688ecbd8962085989.jpg",
"version": "v2d imax",
"nm": "赤狐書生",
"preShow": false,
"sc": 7.7,
"globalReleased": true,
"wish": 177525,
"star": "陳立農(nóng),李現(xiàn),哈妮克孜",
"rt": "2020-12-04",
"showInfo": "今天26家影院放映43場(chǎng)",
"showst": 3,
"wishst": 0,
"comingTitle": "12月4日 周五"
},
{
"id": 1225578,
"haspromotionTag": false,
"img": "http://p0.meituan.net/w.h/moviemachine/cf7d6942f2aa9189cce20519b490b6b1879487.jpg",
"version": "",
"nm": "野性的呼喚",
"preShow": false,
"sc": 9.2,
"globalReleased": true,
"wish": 14703,
"star": "哈里森·福特,丹·史蒂文斯,凱倫·吉蘭",
"rt": "2020-11-13",
"showInfo": "今天暫無(wú)場(chǎng)次",
"showst": 3,
"wishst": 0,
"comingTitle": "11月13日 周五"
},
{
"id": 1302281,
"haspromotionTag": false,
"img": "http://p0.meituan.net/w.h/moviemachine/1d2b4985d0187b437d41a73994ba2e191607376.jpg",
"version": "",
"nm": "奇妙王國(guó)之魔法奇緣",
"preShow": true,
"sc": 0,
"globalReleased": false,
"wish": 20309,
"star": "盧瑤,張洋,陳新玥",
"rt": "2020-12-26",
"showInfo": "2020-12-26 下周六上映",
"showst": 4,
"wishst": 0,
"comingTitle": "12月26日 周六"
},
{
"id": 1301902,
"haspromotionTag": false,
"img": "http://p0.meituan.net/w.h/movie/f686425a1ad1f502254abef593d508bf428685.jpg",
"version": "",
"nm": "沉默東京",
"preShow": false,
"sc": 5.8,
"globalReleased": true,
"wish": 52,
"star": "佐藤浩市,石田百合子,西島秀俊",
"rt": "2020-12-04",
"showInfo": "今天暫無(wú)場(chǎng)次",
"showst": 3,
"wishst": 0,
"comingTitle": ""
},
{
"id": 1286015,
"haspromotionTag": false,
"img": "http://p0.meituan.net/w.h/moviemachine/a0c6d6e130abe399e4cba58be2b1f871840268.jpg",
"version": "",
"nm": "寶可夢(mèng)：超夢(mèng)的逆襲 進(jìn)化",
"preShow": false,
"sc": 8.2,
"globalReleased": true,
"wish": 53255,
"star": "松本梨香,大谷育江,市村正親",
"rt": "2020-12-04",
"showInfo": "今天10家影院放映10場(chǎng)",
"showst": 3,
"wishst": 0,
"comingTitle": "12月4日 周五"
}
]
}
前端：index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>過(guò)濾器</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
</head>
<body>
<div id="box">
<ul>
<li v-for="item in dataList">
<h2>{{item.nm}}</h2>
<p>主演：{{item.star}}</p>
<img :src="item.img | repUrl" alt="">
</li>
</ul>
</div>
</body>
<script>
// 過(guò)濾器
Vue.filter('repUrl', function (url) {
return url.replace('w.h','128.180')
})
let vm = new Vue({
el: '#box',
data: {
dataList: ''
},
mounted() {
axios.get("http://127.0.0.1:5000/").then(res => {
console.log(res.data.coming)
this.dataList = res.data.coming
}).catch(err => {
console.log(err);
})
}
})
</script>
</html>
后端：main.py
import json
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/')
def index():
print('請(qǐng)求來(lái)了')
with open('film.json', mode='rt', encoding='utf-8') as f:
dic = json.load(f)
res = jsonify(dic)
res.headers['Access-Control-Allow-Origin'] = '*'
return res
if __name__ == '__main__':
app.run()
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-789926.html
到了這里，關(guān)于Vue——?jiǎng)討B(tài)組件、插槽的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
