Vue 学习笔记

本文详细介绍了 Vue.js 中的组件使用技巧,包括如何优化组件的复用、父子组件间的数据通信方式以及非父子组件间的通信机制。此外,还探讨了如何减少 AJAX 请求以及解决 vue-awesome-swiper 显示问题的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

基础知识

组件使用中的细节
1、用is来代替直接引用 <tr is="row"></tr> row is components;
2、在子组件中使用data 必须使用函数式返回的写法;
3、 ref 获取dom节点/组件 this.$refs.xx;
4、给组件绑定原生事件<child @click.native="handleClick"></child>

父子组件通信

父子组件通信使用 父组件直接绑定变量 子组件通过 props[]接收

不能直接修改父组件直接传递过来的数据 保存到子组件的data中

props可以校验数据 - 判断传递过来的值的类型是否与预期的相同

非父子组件通信

总线/观察者模式 Vue.prototype.bus = new Vue() 在全局中都可以使用到
发送用
this.bus.$emit("change",this.content)
接收
this.bus.$on("change",function(val){})

优化

减少ajax的请求 比如A、B、C三个组件都需要发送axios请求 但他们都是home.vue的子组件 所以我们在home.vue中发送一次axios请求便可以了

修改了proxyTable 需要重新启动本地服务器

vue-awesome-swiper 显示最后一张图片的时候 是因为刚开始接收的是一个空的数组
我们只需要在 <swiper :options="swiperOption" v-if="swiperList.length">加一个

v-if就可以解决
但是呢 这么写代码不够优雅 因为我们尽量不要在模板里面写逻辑性的代码
所以我们就通过计算属性computed写一个方法showSwiper 返回 swiperList.length


1、vue中 组件的复用意味着生命周期函数不会再被调用;
2、 是最顶层的出口,渲染最高级路由匹配到的组件。同样地,一个被渲染组件同样可以包含自己的嵌套 ,要在嵌套的出口中渲染组件,需要在 VueRouter 的参数中使用 children 配置;

<meta name="renderer" content="webkit"> <!-- 用在360中 -->
<meta name="force-rendering" content="webkit"> <!-- 用在其它 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 针对 IE 浏览器 -->
<meta http-equiv="Cache-Control" content="no-transform"> <!-- 针对百度搜索 -->
<meta name="format-detection" content="telephone=no,email=no,adress=no">

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值