Vue--组件数据传递与组件切换

使用props:

在要传数据的目标组件标签上写一个变量=“” 若是传数据源的数据要在变量前加上:变量=‘’这样传过去的就是一个变量不然是字符串
如下代码

<Box :msg="msg"></Box><script>data(){retuen { msg="123" }
}</script>

在Box组件接收数据"

props:[msg]

这样就可以把msg当做数据直接使用

$parent

$parent 在子组件中使用this.$parent可以获取父组件信息

this.$parent.a1=124 可以把父组件中名为a1的数据内容改成124

this.$chilren可以选择子组件但是无法判断子组件先后顺序

$ref

获取元素节点如<div ref="div1" class="div1"></div>

var div1=this.$refs.div1 就能获取这个节点

就能在函数中对他进行dom操作一般在mounted中执行

v-on="$listeners"

父组件A，子组件B，孙组件C。

C组件中emit事件后，在B中可以直接使用v-on="$listeners"接收，此时可以在A组件中的B上直接使用C中emit出来的事件。

Box2:this.$emit("x","box2修改了数据") Box1:v-on="$listeners" Box:"@x="changex"" changex(val){log(val)} val="box2修改了数据"

v-bind="$attrs"

父组件A，子组件B，孙组件C。

A上设置值，若没在B上用props进行接收，则可以直接在B中的C设置v-bind="$attrs"，此时相当于把属性直接设置在C上。

v-model数据传输

----父组件在子组件标签上<Box v-model="msg"></Box>### 子组件用prons接收value 然后就能当数据使用

组件切换

<component :is="myevent"></component> 当myevent=Box 就加载Box组件可以用函数切换myevent的值从而切换组件

切换组件时会每次都会经历声明周期函数创造到摧毁

用<keep-alive><component></component></keep-alive> keep-alive把component标签嵌套起来切换时就不会创造摧毁但是也导致了不能在mounted挂载时触发事件

缓存钩子函数

activated:加了keep-alive也会执行只能用在keep-alive中切换到当前组件时执行

deacticated:和activeted一样但是当前组件被切换时执行

缓存钩子可以用来做网络请求

keep-alive属性 include:缓存哪些组件可以写组件名也可以写正则 exinclude:哪些不缓存 max :最多缓存几个

Vue--组件数据传递与组件切换相关推荐

七十、Vue城市页面Ajax动态渲染和兄弟组件数据传递
2020/10/29. 周四.今天又是奋斗的一天. @Author:Runsen 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
vue 同页面不同组件数据传递
不用 vuex 同页面不同组件数据传递,用vuex的这篇文章可以忽略! 直接举例: 一个页面有两个组件,其中组件A的数据可以传递到组件B,同理组件B的数据可以传递到组件A, 即AB两个组件可以互相传递 ...
组件、局部的组件、表行组件、组件数据传递
组件:基础的基础知识点组件(Component,Portlet) 组件组件就是页面上的一小块区域内容,完成一个小的页面功能,请参照视频第六课. 综合例 <div id="myAp ...
Vue实现数据大屏组件轮播效果
Vue实现数据大屏组件轮播效果需求分析实现备注需求采用Vue结合Echarts制作了数据大屏,由于每个组件占用的空间较小,展示起来不够清晰,所以需要在展示大屏之后,每隔一段时间,就对各组 ...
Vue表单类的父子组件数据传递示例_vue.js_脚本之家
使用Vue.js进行项目开发,那必然会使用基于组件的开发方式,这种方式的确给开发和维护带来的一定的便利性,但如果涉及到组件之间的数据与状态传递交互,就是一件麻烦事了,特别是面对有一大堆表单的页面. 在 ...
vue父组件变量传递子组件_Vue.js 父组件向子组件传递数据通过 props
我的使用场景:父组件:home.vue 子组件:feed-section.vue 父组件 home.vue 通过请求拿到数据后,传递给子组件 feed-section.vue:因为在子组件中需要渲染 ...
vue父组件变量传递子组件_Vue2.x中的父组件数据传递至子组件
父组件结构 template :girls="aGirls"> script import vGirlGroup from './GirlGroup' export defa ...
SwiftUI 跨组件数据传递
Python实战社群 Java实战社群长按识别下方二维码,按需求添加扫码关注添加客服进Python社群▲ 扫码关注添加客服进Java社群▲ 作者: Cyandev, iOS 和 MacOS 开 ...
Vue2.x中的父组件数据传递至子组件
父组件结构 template <template><div><v-girl-group :girls="aGirls"></v-girl- ...
react中父子组件数据传递，子组件之间的数据传递
首先有三个js文件,index.js(父组件) baseForm.js(子组件) etable.js(子组件) 在index.js中定义一个arr数组,传给BaseForm组件 import Reac ...

Vue--组件数据传递与组件切换

Vue--组件数据传递与组件切换相关推荐

最新文章

热门文章