投资建设网站,一站式服务门户,自己做网站卖衣服,新手做网站的几个必要步骤3.组件插槽 3-1组件插槽 注意 插槽内容可以访问到父组件的数据作用域,因为插槽内容本身就是在父组件模版中定义的 插槽内容无法访问子组件的数据.vue模版中的表达式只能访问其定义时所处的作用域,这和JavaScript的词法作用域是一致的,换言之: 父组件模版的表达式只能访问父组…3.组件插槽 3-1组件插槽 注意 插槽内容可以访问到父组件的数据作用域,因为插槽内容本身就是在父组件模版中定义的 插槽内容无法访问子组件的数据.vue模版中的表达式只能访问其定义时所处的作用域,这和JavaScript的词法作用域是一致的,换言之: 父组件模版的表达式只能访问父组件的作用域,子组件模版中的表达式只能访问子组件的作用域 3-2具名插槽 具名思意:就是给插槽取一个相同的名字,使它到相应的位置 案例 App.vue templatediv!-- 使用具名插槽的使用,使用template进行包裹--!--v-slot:left,记住没有引号--template v-slot:lefti左边/i/template!-- 可以省略写成# --template #centerdiv中间/div/templatetemplatei右边/i/template/div /templateChild.vue templatediv!-- name:是插槽的名字,与父组件的slot要一致 --slot nameleft/slotslot namecenter/slotslot nameright/slot/div /template3-3作用域插槽 在某些场景下,如果想要同时使用父组件和子组件区域内的数据,要做到这一点,就需要让子组件在渲染的时候,把数据提供给插槽,这就是作用域插槽 案例:通过axios获取猫眼的数据 注意点: v-slot“scope” 不能写在Film组件里面,如果写在Film里面就需要删掉template包装元素v-slot“{scope}”:还可以使用对象解析,因为传过来的是一个对象 App.vue(方式一) templateFilmtemplate v-slotscopeulli v-fordata in scope.list :keydata.idimg :srcdata.img stylewidth: 100px; {{ data.nm }}/li /ul/template/Film /templateFilm.vue templatedivul!-- 把数据通过作用域插槽,传到父组件去(可以传多个,传过去的是一个对象--slot :listdataListli v-fordata in dataList :keydata.id{{ data.nm }}/li/slot/ul/div /template script//引入axios模块,需要先下载 npm i axiosimport 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:就是子组件定义了一个nameFilm --!-- v-slot:Film#Film--!-- template v-slot:Film{list,a} --!-- 使用default默认插槽,则页面显示的是子组件的内容,不再是父组件的内容 --!-- template #default{list,a} --template #Film{list,a}{{ a }}ulli v-fordata in list :keydata.idimg :srcdata.img stylewidth: 100px; {{ data.nm }}/li/ul/template /FilmFilm.vue !-- 还可以使用具名插槽配合作用域插槽一起使用 --slot :listdataList :a1 :b2 nameFilmul li v-fordata in dataList :keydata.id{{ data.nm }}/li/ul/slot4.生命周期 每个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!-- 必须要有宽度和高度,否则显示不出来 --divbutton clicksmall小图/buttondiv idmain :stylestyleObj/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 templatedivMySwiper v-ifdataList.length eventhandleEvent :loopfalseMySwiperItem v-fordata in dataList :keydata {{ data.nm }}img :srcdata.img alt srcset stylewidth: 600px; height:300px /MySwiperItem/MySwiper{{ info }}/div /template scriptimport 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.infothis.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.infothis.dataList[0].videoName})},components: {MySwiper,MySwiperItem}} /scriptMySwiper.vue template div classswiperdiv classswiper-wrapperslot/slot/div!-- If we need pagination --div classswiper-pagination/div!-- If we need navigation buttons --div classswiper-button-prev/divdiv classswiper-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 paginationpagination: {el: .swiper-pagination,},// Navigation arrowsnavigation: {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; } /styleMySwiperItem.vue templatediv classswiper-slideslot/slot/div/template6.自定义指令 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(局部注册) templatediv!--方式1--h1 v-colorred /h1!--方式2:动态绑定--h1 v-colormyColor /h1/div /template scriptexport defalut{data(){return {myColor:yellow}}//自定义指令directives:{color:{mounted(el,binding){el.style.backgroundbinding.value},//动态绑定,需要使用更新钩子函数updated(el,binding){el.style.backgroundbinding.value}}}} /script指令可以简写 对于自定义指令来说一个很常见的情况是仅仅需要在 mounted 和 updated 上实现相同的行为除此之外并不需要其他钩子。这种情况下我们可以直接用一个函数来定义指令如下所示 div v-colorcolor/divcolor(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) {} }