Vue——动态组件、插槽
组件通讯
1.ref属性（也可以实现组件间通信：子和父都可以实现通信）
- ref放在
标签上，拿到的是原生的DOM节点 - ref放在
组件上，拿到的是组件对象，对象中的数据、函数 都可以直接使用 - 通过这种方式实现子传父（this.$refs.mychild.text）
- 通过这种方式实现父传子（调用子组件方法传参数）
子传父
2.事件总线（不同层级的不同组件通信）
原本的通信方式
事件总线的通信方式
实例
子传父
动态组件
1.基本使用
动态组件
-
-
-
2.keep-alive的使用
keep-alive可以让输入框内有的内容一致保持，不会因为切换而重置
Title
-
-
-
slot 插槽
- 一般情况下，编写完1个组件之后，组件的内容都是写死的，需要加数据 只能去组件中修改，扩展性很差
- 然后就出现了插槽这个概念，只需在组件中添加
1.基本使用
slot 插槽
Hello World
2.小案例（通过插槽实现在1个组件中控制另1个组件的显示隐藏）
slot 插槽
3.具名插槽
具名插槽
我是具名插槽a插入的内容
我是具名插槽b插入的内容
可以指定标签放在某个插槽的位置
自定义组件的封装
Title
自定义指令
1.基本使用
自定义指令 基本使用
我是1个DIV
2.让所有使用自定义指令的标签背景都变红色
自定义指令 基本使用
我是1个DIV
我也是1个DIV
3.用户指定自定义指令的背景色,修改变量，背景变化
自定义指令
我是1个DIV
我是1个DIV
我是1个DIV
我是1个DIV
我是1个DIV
过滤器
json数据：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场",
"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场",
"showst": 3,
"wishst": 0,
"comingTitle": "11月27日 周五"
},
{
"id": 1358968,
"haspromotionTag": false,
"img": "http://p0.meituan.net/w.h/movie/d33858dbfc207da3b36c0dc7fff7a8bb2028677.jpg",
"version": "",
"nm": "汪汪队立大功之超能救援",
"preShow": false,
"sc": 8.3,
"globalReleased": true,
"wish": 24833,
"star": "杨鸥,韩娇娇,李敏妍",
"rt": "2020-11-13",
"showInfo": "今天5家影院放映7场",
"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场",
"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": "陈立农,李现,哈妮克孜",
"rt": "2020-12-04",
"showInfo": "今天26家影院放映43场",
"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": "今天暂无场次",
"showst": 3,
"wishst": 0,
"comingTitle": "11月13日 周五"
},
{
"id": 1302281,
"haspromotionTag": false,
"img": "http://p0.meituan.net/w.h/moviemachine/1d2b4985d0187b437d41a73994ba2e191607376.jpg",
"version": "",
"nm": "奇妙王国之魔法奇缘",
"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": "今天暂无场次",
"showst": 3,
"wishst": 0,
"comingTitle": ""
},
{
"id": 1286015,
"haspromotionTag": false,
"img": "http://p0.meituan.net/w.h/moviemachine/a0c6d6e130abe399e4cba58be2b1f871840268.jpg",
"version": "",
"nm": "宝可梦：超梦的逆袭 进化",
"preShow": false,
"sc": 8.2,
"globalReleased": true,
"wish": 53255,
"star": "松本梨香,大谷育江,市村正亲",
"rt": "2020-12-04",
"showInfo": "今天10家影院放映10场",
"showst": 3,
"wishst": 0,
"comingTitle": "12月4日 周五"
}
]
}
前端：index.html
过滤器
-
{{item.nm}}
主演：{{item.star}}
![]()
后端：main.py
import json
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/')
def index():
print('请求来了')
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()
