随笔分类 - vue通信或传值
摘要:官网介绍 $children $children 获取当前实例的直接子组件 。需要注意 $children 并不保证顺序,也不是响应式的。[特别重要] 如果你发现自己正在尝试使用 $children 来进行数据绑定, 考虑使用一个数组配合 v-for 来生成子组件,并且使用 Array 作为真正的来
阅读全文
摘要:全局事件总线 在写组件的时候,我们都知道父传递子 也知道子传递给父 但是组件间嵌套复杂的时候我们应该怎么通信呢? 有的小伙伴会说适用vuex,的确是可以解决问题的 下面我们说一下全局事件总线 一种组件间通信的方式,适用于任意的组件间通信。适用于任意的组件间通信。适用于任意的组件间通信。 场景描述 a
阅读全文
摘要:场景描述 有些时候,我们发现有些组件部分功能代码是几乎是一样的。 这个时候,我们就可以将相同的逻辑代码抽离出来 此时我们的主角混入mixin就登场了 下面我们有a-test和b-test两个组件,点击按钮发生的逻辑是一样的。 这个时候我们就可以使用混入mixin a-test代码如下 <templa
阅读全文
摘要:sync的使用场景 有些时候子组件需要修改父组件传递过来的prop, 要去改变父组件的状态的时候就需要使用aync 看见这里有些同学可能会问?? 不是说不可以修改父组件传递到子组件的值吗? 为啥要修改了呢??难道不会报错吗警告吗? 正常情况下,确实不可以去修改父组件传递给子组件中的值! 你修改后会把
阅读全文
摘要:异步组件 异步组件:只在组件需要渲染(组件第一次显示)的时候进行加载渲染并缓存,缓存是以备下次访问。 Vue实现按需加载 在打包的时候,会打包成单独的js文件存储在static/js文件夹里面** 在调用时使用ajax请求回来插入到html中。 调用异步组件的方法 异步组件中,如果父组件调用子组件,
阅读全文
摘要:main.js 在 store中的index.js中 A页面设置值 B页面获取值(第以种方式直接获取) 第二种方式使用computed 我们发现在刷新页面的情况下。 store中的值,会丢失的。在刷新的时候,保留在本地 在app.vue中写 总结一下beforeunload事件 当浏览器窗口关闭或者
阅读全文
摘要:B组件向C组件传递一个值。 一种组件间通信的方式, 适用于任意的组件间通信。 适用于任意的组件间通信。 适用于任意的组件间通信。 通过this.$bus.$emit('事件名',数据)进行提供数据 通过this.$bus.$on('事件名',(data)=>{ })接受数据 创建一个js文件,默认导
阅读全文
摘要:vue子组件,调用父组件中有三种方法哈!下面我们一起来讲解。 第一种使用 直接在子组件中通过this.$parent.父组件中的方法。来调用父组件的方法 第一种的缺点是不能够传递参数哈。它只能够调用方法。 第二种 方法是在子组件里用$emit向父组件触发一个事件,父组件监听这个事件就行了 可以传递参
阅读全文
摘要:01 》子传父 使用函数的方式 接受 zi.vue <template> <div> 子组件: <span>hha</span> <button @click="clickBtn"> 点我传递给父亲 </button> </div> </template> export default { data
阅读全文
摘要:子组件中有一个说的方法 在父组件中去调用当你点击的时候 去调用子组件中的方法 fu.vue 在父组件的方法中调用子组件的方法,很重要 this.$refs.mychild.parentHandleclick(); { <template> <div> <button @click="clickPar
阅读全文
摘要:01 >父传子 props:["a","name"]来进行 在父亲页面可以看见 子组的值是动态的 fu.vue <h2>我是父亲</h2> <br> <!-- 引入子组件 --> <child a="test1" name="张三"></child> <child a="test2" name="李
阅读全文