组件插槽,生命周期,轮播图组件的封装,自定义指令的封装等详解以及axios的卖座案例

3.组件插槽

3-1组件插槽

在这里插入图片描述

注意

插槽内容可以访问到父组件的数据作用域,因为插槽内容本身就是在父组件模版中定义的

插槽内容无法访问子组件的数据.vue模版中的表达式只能访问其定义时所处的作用域,这和JavaScript的词法作用域是一致的,换言之:

父组件模版的表达式只能访问父组件的作用域,子组件模版中的表达式只能访问子组件的作用域

3-2具名插槽

具名思意:就是给插槽取一个相同的名字,使它到相应的位置

在这里插入图片描述

案例

App.vue

<template>
	<div>
        <!-- 使用具名插槽的使用,使用template进行包裹-->
        <!--v-slot:left,记住没有引号-->
        <template v-slot:left>
            <i>左边</i>
		</template>
  <!-- 可以省略写成# -->
	 <template #center>
            <div>中间</div>
		</template>
 <template>
            <i>右边</i>
		</template>
    </div>
</template>

Child.vue

<template>
	<div>
            <!-- name:是插槽的名字,与父组件的slot要一致 -->
        <slot name="left"></slot>
         <slot name="center"></slot>
         <slot name="right"></slot>
    </div>
</template>
3-3作用域插槽

在某些场景下,如果想要同时使用父组件和子组件区域内的数据,要做到这一点,就需要让子组件在渲染的时候,把数据提供给插槽,这就是作用域插槽

在这里插入图片描述

案例:通过axios获取猫眼的数据

注意点:

  1. v-slot=“scope” 不能写在Film组件里面,如果写在Film里面就需要删掉template包装元素
  2. v-slot=“{scope}”:还可以使用对象解析,因为传过来的是一个对象

App.vue(方式一)

<template>
	<Film>
    	<template v-slot="scope">
            <ul>
               <li v-for="data in scope.list" :key="data.id">
                     <img :src="data.img" style="width: 100px;">  
                  {{ data.nm }}
    			</li> 
   			 </ul>
		</template>
    </Film>
</template>

Film.vue

<template>
	<div>
        <ul>
            <!-- 把数据通过作用域插槽,传到父组件去(可以传多个,传过去的是一个对象-->
           <slot :list="dataList">
    				 <li v-for="data in dataList" :key="data.id">
                   {{ data.nm }}
    		</li>
    		</slot>
    	</ul>
    </div>
</template>
<script>
    //引入axios模块,需要先下载 npm i axios
	import axios from "axios";
    export defalut{
        data(){
            return {
                dataList:[]
            }
        },
           //钩子函数,mounted,页面一加载就显示数据
            mounted(){
                 //json文件,记得放在public文件夹下面,否则访问不到
                axios.get("../../../public/js/hot.json").then(res => {
                console.log(res.data.data.hot);
                this.dataList = res.data.data.hot;
            })
            }
    }
</script>

''方式二

具名插槽与作用域联合使用

App.vue

<Film>
	 <!-- 具名插槽与作用域插槽联合使用 -->
           <!--#Film:就是子组件定义了一个name="Film"  -->
           <!--  v-slot:Film===#Film-->
           <!-- <template  v-slot:Film="{list,a}"> -->
            <!-- 使用default默认插槽,则页面显示的是子组件的内容,不再是父组件的内容 -->
           <!-- <template  #default="{list,a}"> -->
           <template  #Film="{list,a}">
            {{ a }}
            <ul>
                <li v-for="data in list" :key="data.id">
                  <img :src="data.img" style="width: 100px;">  
                  {{ data.nm }}
                </li>
              </ul>
           </template>     
</Film>

Film.vue

 <!-- 还可以使用具名插槽配合作用域插槽一起使用 -->
      <slot :list="dataList" :a="1" :b="2" name="Film">
        <ul >
            <li v-for="data in dataList" :key="data.id">
                {{ data.nm }}
                
            </li>
        </ul>
      </slot>

4.生命周期

每个Vue组件实例在创建时都需要经历一系列的初始化步骤,比如设置好数据侦听,编译模板,挂载实例到DOM,以及在数据改变时更新DOM.在此过程中,它也会运行被称为生命周期钩子函数,让开发者有机会再特定阶段运行自己的代码

在这里插入图片描述

(1) beforeCreate()会在实例初始化完成、props 解析之后、data() 和 computed 等选项处理之前立即调用。(无法访问状态以及methods)

(2)created() 当这个钩子被调用时，以下内容已经设置完成：响应式数据、计算属性、方法和侦听器。然而，此时挂载阶段还未开始，因此 $el 属性仍不可用。(能访问到初始化,并且能做初始化)

(3)beforeMount()当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。(第一次创建最后能修改状态的地方)

(4)mounted()所有同步子组件都已经被挂载。这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用("挂载dom节点,初始化轮播,Echarts,setInterval,ajax)

只要状态改变,5和6函数就会被调用

(5)beforeUpdate()这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的。(能访问到最新的状态,无法访问到更新后的dom)

(6)updated()这个钩子会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的。如果你需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick() 作为替代。(访问到更新之后的dom)

(7)beforeUnmount()当这个钩子被调用时，组件实例依然还保有全部的功能。

(8)unmounted()在一个组件实例被卸载之后调用。

Echarts案例

npm i echars

<template>
    
    <!-- 必须要有宽度和高度,否则显示不出来 -->
    <div>
        <button @click="small">小图</button>
        <div id="main" :style="styleObj"></div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    data() {
        return {
            styleObj: {
                width: "600px",
            height: "400px"
            }
        }
    },
    methods: {
        small() {
            this.styleObj.width = "400px"
            // this.styleObj.height = "100px"
            //----------------方法二,改变大小-----------------
            // setTimeout(() => {
            //    this.myChart.resize() 
            // },0)
            //----------------方法三.直接使用提供的方法-----------------
            // 在 Vue 中，DOM 更新不是同步的，而是异步执行的，而 $nextTick 则提供了一种在 DOM 更新后执行代码的方式。
            this.$nextTick(() => {
                this.myChart.resize()
            })
        },

    },
    mounted() {
        // 基于准备好的dom，初始化echarts实例
  this.myChart = echarts.init(document.getElementById('main'));
// 绘制图表
this.myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});
    },
    updated() {
        // 改方法是控制点击按钮之后,使值生效
        // 任何状态更新,都会触发该生命周期函数
        // this.myChart.resize();
    },
}

</script>

//----------------跟随窗口,大小随着改变-----------------
    window.onresize = () => {
             this.myChart.resize()
      }
    },
    unmounted() {
        // 销毁实例
        window.onresize = null
   }

挂载在window上的东西,记得要销毁,使用unmound

5.组件的封装

轮播组件

App.vue

<template>
    <div>
        <MySwiper v-if="dataList.length" @event="handleEvent" :loop="false">
         <MySwiperItem v-for="data in dataList" :key="data" >
            {{ data.nm }}
            <img :src="data.img" alt="" srcset="" style="width: 600px; height:300px" >
         
         </MySwiperItem>
        
            </MySwiper>
            {{ info }}
    </div>
</template>
<script>
    import MySwiper from "./MySwiper.vue";
import MySwiperItem from "./MySwiperItem.vue";
    import axios from "axios";
export default {
    data() {
        return {
            dataList: [],
            info:""
        }
    },
    methods: {
        handleEvent(index) {
            console.log(index,);
         this.info=this.dataList[index].videoName

        }
    },
    mounted() {
        axios.get("../../../public/js/hot.json").then(res => {
            console.log(res.data.data.hot);
            this.dataList = res.data.data.hot;
            this.info=this.dataList[0].videoName
       })
    },
    components: {
        MySwiper,
        MySwiperItem
        }
    }
</script>

MySwiper.vue

<template>
<div class="swiper">
  <div class="swiper-wrapper">
    <slot></slot>
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

</div>
</template>
<script>
import Swiper from 'swiper/bundle';
import 'swiper/css/bundle';
export default {
  props: {
    loop: {
      type: Boolean,
      default: true
  }
},
    mounted() {
        var mySwiper = new Swiper('.swiper', {

          loop: this.loop,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

          on:{
            slideChange:  ()=> {
                    console.log('改变了，activeIndex为' + mySwiper.activeIndex);

                this.$emit("event",mySwiper.activeIndex)
                },
  },
});
   }
}
</script>
<style>
.swiper {
  width: 600px;
  height: 300px;
}
</style>

MySwiperItem.vue

<template>
    
            <div class="swiper-slide">
                <slot></slot>
            </div>
           
  
</template>

6.自定义指令

6-1指令写法&钩子

除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外，Vue 还允许你注册自定义的指令 (Custom Directives)。自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑

全局注册自定义指令

main.js里面

CreateApp(App)
//自定义一个颜色的指令,这里写color就可以,使用指令需要加v-,就是v-color
.directive('color',{
    //挂载在mounted上
    mounted(el){
        //el是dom节点
        console.log(el);
       el.style.backgroundColor = 'red'
    }
})
.mount("#app")

App.vue(局部注册)

<template>
	<div>
        <!--方式1-->
        <h1 v-color="'red'"> </h1>
          <!--方式2:动态绑定-->
         <h1 v-color="myColor"> </h1>
   
    </div>
</template>
<script>
	export defalut{
        data(){
            return {
                myColor:'yellow'
            }
        }
        //自定义指令
        directives:{
            color:{
                mounted(el,binding){
                    el.style.background=binding.value
                },
                    //动态绑定,需要使用更新钩子函数
                    updated(el,binding){
                         el.style.background=binding.value
                    }
            }
        }
    }
</script>

指令可以简写

对于自定义指令来说，一个很常见的情况是仅仅需要在 mounted 和 updated 上实现相同的行为，除此之外并不需要其他钩子。这种情况下我们可以直接用一个函数来定义指令，如下所示：

<div v-color="color"></div>

color(el, binding) {
            el.style.backgroundColor = binding.value;
            },

指令钩子

const myDirective = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
    // 下面会介绍各个参数的细节
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode, prevVnode) {}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/161335.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

计算机毕业设计选题推荐-掌心办公微信小程序/安卓APP-项目实战

计算机毕业设计选题推荐-掌心办公微信小程序/安卓APP-项目实战

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…
阅读更多...
模块一、任务一.数据分析概述

模块一、任务一.数据分析概述

一、module1 预测未来-总统大选 样本偏差 二、module2 优化现状-化妆品销售 1、数据分析师从业务类型上划分 2、目标&#xff1a;总销量 达到 目标销量 3、固定基本流程 &#xff08;1&#xff09;确定 一、目标值节节升高&#xff0c;是否合理&#xff1f;根据什么定的&…
阅读更多...
zabbix-proxy分布式监控

zabbix-proxy分布式监控

Zabbix是一款开源的企业级网络监控软件&#xff0c;可以监测服务器、网络设备、应用程序等各种资源的状态和性能指标。在大型环境中&#xff0c;如果只有一个Zabbix Server来监控所有的节点&#xff0c;可能会遇到性能瓶颈和数据处理难题。 为了解决这个问题&#xff0c;Zabbi…
阅读更多...
爱拖延怎么办？如何改变拖延症？

爱拖延怎么办？如何改变拖延症？

拖延症是我们日常生活中多见的问题&#xff0c;也是不怎么受重视的问题&#xff0c;大多数人都会认为拖延不是什么大问题&#xff0c;办事拖拉怎么也不可能和心理疾病扯上关系。这里小猫测试网分不同情况来讨论。 偶尔的拖延没什么关系&#xff0c;建议忘掉这种偶然性拖延&…
阅读更多...
[C国演义] 第二十一章

[C国演义] 第二十一章

第二十一章 最长公共子序列不相交的线 最长公共子序列 力扣链接 单个数组的子序列问题 – dp[i] -- 以nums[i] 为结尾的所有子序列中, xxx xxx. 然后状态转移方程根据 最后一个位置的归属问题进行讨论 两个数组的子序列问题 – 以小见大, 分别分析nums1中的一个区间 和 nums…
阅读更多...
山西电力市场日前价格预测【2023-11-19】

山西电力市场日前价格预测【2023-11-19】

1.日前价格预测 预测说明&#xff1a; 如上图所示&#xff0c;预测明日&#xff08;2023-11-19&#xff09;山西电力市场全天平均日前电价为591.63元/MWh。其中&#xff0c;最高日前电价为1500.00元/MWh&#xff0c;预计出现在16:45~20:45。最低日前电价为268.57元/MWh&#x…
阅读更多...
JAVAEE 初阶 多线程基础(一)

JAVAEE 初阶 多线程基础(一)

多线程基础 一.线程的概念二.为什么要有线程三.进程和线程的区别和关系四.JAVA的线程和操作系统线程的关系五.第一个多线程程序1.继承Thread类 一.线程的概念 一个线程就是一个 “执行流”. 每个线程之间都可以按照顺讯执行自己的代码. 多个线程之间 “同时” 执行着多份代码 同…
阅读更多...
竞赛选题 疫情数据分析与3D可视化 - python 大数据

竞赛选题 疫情数据分析与3D可视化 - python 大数据

文章目录 0 前言1 课题背景2 实现效果3 设计原理4 部分代码5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 大数据全国疫情数据分析与3D可视化 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff0…
阅读更多...
zabbix告警 邮件告警 钉钉告警

zabbix告警 邮件告警 钉钉告警

邮件告警添加主机组添加模板添加主机在模板中添加监控项在模板中添加触发器添加动作&#xff0c;远程执行命令给用户绑定告警媒介类型 钉钉告警安装python依赖模块python-requests配置钉钉告警配置脚本zabbix_ding.conf在目录/var/log/zabbix中创建钉钉告警日志文件zabbix_ding…
阅读更多...
自动化测试 —— 如何优雅实现方法的依赖！

自动化测试 —— 如何优雅实现方法的依赖！

在 seldom 3.4.0 版本实现了该功能。 在复杂的测试场景中&#xff0c;常常会存在用例依赖&#xff0c;以一个接口自动化平台为例&#xff0c;依赖关系&#xff1a; 创建用例 --> 创建模块 --> 创建项目 --> 登录。 用例依赖的问题 •用例的依赖对于的执行顺序有严格…
阅读更多...
Dart笔记：glob 文件系统遍历

Dart笔记：glob 文件系统遍历

Dart笔记 文件系统遍历工具&#xff1a;glob 模块 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://blog.csdn.net/qq_28550263/article/details/13442…
阅读更多...
机器学习笔记 - 隐马尔可夫模型的简述

机器学习笔记 - 隐马尔可夫模型的简述

隐马尔可夫模型是一个并不复杂的数学模型，到目前为止，它一直被认为是解决大多数自然语言处理问题最为快速、有效的方法。它成功地解决了复杂的语音识别、机器翻译等问题。看完这些复杂的问题是如何通过简单的模型得到描述和解决，我们会由衷地感叹数学模型之妙。 人类信息交流…
阅读更多...
Pandas 将DataFrame中单元格内的列表拆分成单独的行

Pandas 将DataFrame中单元格内的列表拆分成单独的行

使用 explode 函数 import pandas as pddata {month: [1, 2],week: [[i for i in range(2)], [i for i in range(3)]]} df pd.DataFrame(data) print(df)df df.explode(week) print(df)
阅读更多...
【数据结构】栈与队列面试题（C语言）

【数据结构】栈与队列面试题（C语言）

我们再用C语言做题时&#xff0c;是比较不方便的&#xff0c;因此我们在用到数据结构中的某些时只能手搓或者Ctrlcv 我们这里用到的栈或队列来自栈与队列的实现 有效的括号 有效的括号&#xff0c;链接奉上。 解题思路&#xff1a; 先说结论&#xff1a; 因为我们是在讲栈与…
阅读更多...
[C国演义] 哈希的使用和开闭散列的模拟实现

[C国演义] 哈希的使用和开闭散列的模拟实现

哈希的使用和开闭散列的模拟实现 1. 使用1.1 unordered_map的接口1.2 unordered_set的接口 2. 哈希底层2.1 概念2.2 解决哈希冲突 3. 实现3.1 开放寻址法3.2 拉链法 1. 使用 1.1 unordered_map的接口 构造 void test1() {// 空的unordered_map对象unordered_map<int, in…
阅读更多...
【Proteus仿真】【Arduino单片机】LM35温度计

【Proteus仿真】【Arduino单片机】LM35温度计

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真Arduino单片机控制器&#xff0c;使用PCF8574、LCD1602液晶、LM35传感器等。 主要功能&#xff1a; 系统运行后&#xff0c;LCD1602显示传感器检测温度。 二、软件设计 /* 作者&a…
阅读更多...
Jmeter 吞吐量Per User作用

Jmeter 吞吐量Per User作用

第一点&#xff1a;Per User仅在Total Execution时生效 第二点&#xff1a;Per User 选中后 聚合报告中将统计的的样本数将变成线程组配置的线程数*吞吐量控制器配置的执行样本数量&#xff08;前提是线程组配置执行接口的次数线程数*循环数 大于吞吐量控制器配置的执行样本数…
阅读更多...
【脑与认知科学】【n-back游戏】

【脑与认知科学】【n-back游戏】

请参考课堂内容&#xff0c;设计一种测试工作记忆的实验方法&#xff0c;并选择三位同学作为被试测试工作记忆。请画出实验流程图&#xff0c;叙述实验测试目标&#xff0c;并分析实验结果。 举例&#xff1a;一般我们选择n_back来测试对数字或字母的记忆&#xff0c;选择色块实…
阅读更多...
Python字典六种类型概述

Python字典六种类型概述

1. 引言 看到这个标题&#xff0c;你可能会觉得奇怪&#xff0c;事实上在Python的标准库中共有6种字典类型&#xff01;在某些情形下&#xff0c;你可能会觉得标准的Python字典dict&#xff0c;并不能完全符合你的需求。在本文中&#xff0c;我们将讨论Python中其他5个鲜为人知…
阅读更多...
【火炬之光-魔灵装备】

【火炬之光-魔灵装备】

文章目录 装备天赋追忆石板技能魂烛刷图策略 装备 头部胸甲手套鞋子武器盾牌项链戒指腰带神格备注盾牌其余的装备要么是召唤物生命&#xff0c;要么是技能等级&#xff0c;鞋子的闪电技能等级加2不是核心&#xff0c;腰带的话主要是要冷却有冷却暗影的技能是不会断的&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站