React之小知识点总结
2018-11-21 15:21 | 评论：0 次 | 浏览: 281
总结react中常常被忽略的小知识点 1）即使state里设置成和之前的值一样，render也会重新渲染 2）父组件传给子组件的属性（props是只读的，在子组件中已在this.state里将属性赋值给定义的变量），如果属性在父组件中可以操作改变值的话，那么在子组件中就不建议修改，如果属性在父组件不 ...
React Hook父组件获取子组件的数据/函数
2019-09-07 17:30 | 评论：0 次 | 浏览: 308
我们知道在react中，常用props实现子组件数据到父组件的传递，但是父组件调用子组件的功能却不常用。文档上说ref其实不是最佳的选择，但是想着偷懒不学redux，在网上找了很多教程，要不就是hook的讲的太少，要不就是父子组件傻傻分不清，于是只好再啃了一下文档，就学了一下其它hook的api。 ...
vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值
2019-12-26 05:50 | 评论：0 次 | 浏览: 275
首先文字简单撸一下 父子传子 首先在父组件上绑定一个属性，在子组件里用props接收，可以是数组或者是对象 子传父 在父组件升上自定义一个方法，在子组件里通过this.$emit("父组件上的方法名"，a) / a /代表需要传递的参数 兄弟组件通讯 需要创建一个公共的vue 实例, new vue ...
react修饰器对组件实例ref引用实例的影响
2020-03-16 14:27 | 评论：0 次 | 浏览: 269
ref: 获取组件实例的引用，即获取实例的this。 影响原因 当一个组件用了修饰器之后，其ref会被包裹一层，而不能找到真实的this实例。 ref在react组件中，同为关键字，子组件取不到该props 解决方法 在组件外层包裹一层 container,手动绑定ref 指定getInstance ...
Vue-Router 源码解析(五) router-link组件的用法及原理
2020-03-16 14:28 | 评论：0 次 | 浏览: 253
该组件支持用户在具有路由功能的应用中(点击)导航,默认渲染成带有正确链接的<a>标签，可以通过tag属性生成别的标签。 它本质上是通过在生成的标签上绑定了click事件，然后执行对应的VueRouter实例的push()实现的，对于router-link组件来说，可以传入以下props: to 表示 ...
Vue-Router 源码分析(六) router-view组件的用法及原理
2020-03-19 14:26 | 评论：0 次 | 浏览: 208
router-view是一个 functional 组件，渲染路径匹配到的视图组件。<router-view> 渲染的组件还可以内嵌自己的 <router-view>，根据嵌套路径，渲染嵌套组件 它只有一个名为name的props,这个name还有个默认值，就是default,一般情况下，我们不用传 ...
基于elementui带连接线的树形控件
2020-07-14 16:41 | 评论：0 次 | 浏览: 963
因工作需求，这把要书写一个基于elementUI带连接线的树形控件。因为自己也找了很久没有特别合适的组件。所以将自己写的分享一下。话不说多 上图 。图下就是我所书写的大概样式第一张图大体复制以下代码就像（因有两张本地图片，所以可能会出错，解决方案，代码中有注释） 这里有一个open的属性是显示文件夹图标的切换的。<template> <el-tree :data="data" ref="tree" :props="defaultProps" c
3-1-12-Snabbdom 之模块
2020-07-14 16:44 | 评论：0 次 | 浏览: 163
模块snabbdom 的核心库并不能处理元素的属性/样式/事件等，如果处理需要使用模块。常用模块官方提供的 6 个模块attributes设置 DOM 元素的属性，使用 setattribute()处理布尔类型的属性props和 attributes 模块相似，设置 DOM 元素的属性 element[attr] = calue不处理布尔类型的属性class切换类样式注意：给元素设置样式是通过 sel 选择器dataset设置 data-* 的自定义
vue 父子组件间的传值（一）——父传子
2020-07-17 12:39 | 评论：0 次 | 浏览: 187
一、父组件向子组件传值父组件向子组件传值，子组件只要使用props接收即可。<style scope> .hide{ display:none; }</style>/*父组件*/<template><div class="parent"> <span v-for="(item,index) in message" @click="clickHandle(index)">{{item.value}}
荐 Vue的props和$emit总结
2020-07-17 12:43 | 评论：0 次 | 浏览: 181
总结：被封装好的组件，才能被调用 组件如何封装，请查看文档组件封装好后，要进行全局调用，在components文件夹下创建index.js文件，用 Vue.component() 进行全局调用（如下图）注意：全局调用，是component。局部调用，是components如果组件引用了一个组件，那么该组件就叫父组件。被引用的这个组件就叫子组件下文中的父组件调用子组件，在父组件进行三个操作步骤：...
自定义组件的v-model
2020-07-24 17:01 | 评论：0 次 | 浏览: 121
若想封装表单上通用或美化组件，可用自定义组件v-model来实现，默认props为value和事件为inputinput[type=“text”]的自定义组件父组件上代码<template> <div> <input-model v-model="inputVal" /> {{inputVal}} </div></template><script>import InputModel from "@/c
vue组件传值,父子传值,子父传值,兄弟传值,组件主动获取数据及方法
2020-07-26 17:15 | 评论：0 次 | 浏览: 810
一.父子传值父组件引入子组件并注册在标签通过动态绑定data里的值子组件通过props接收父组件传递过来的参数主动获取值父组件里注册的子组件标签里写上ref在mounted声明周期函数里打印this.$refs.name.msg即可效果图// 父组件<template> <div> <fatherSon :num=num :go='go' ref="name"></fatherSon> </div>&l
151Vue-router路由嵌套children+动态匹配路由$route.params+传参数props:true+命名路由
2020-08-10 16:48 | 评论：0 次 | 浏览: 451
children<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> .
vue+element的 el-cascader进行省市区县选择三级四级联动
2020-09-26 09:46 | 评论：0 次 | 浏览: 814
//prop进行自定义的value和label以及children<el-cascader v-model="value" @active-item-change="handleItemChange" :props="{ value: 'code',label: 'name',children: 'children'}" :options="options" @change="handleChange"></el-cascader>//先获取省的接口handleP
vue组件封装之三方案封装dialog组件
2020-10-23 09:51 | 评论：0 次 | 浏览: 101
三种思路封装dialog组件封装dialog组件需要知识有1.插槽【匿名插槽，具名插槽】2.transition动画,以及CSS3的动画【因为用到了CSS3所以会有兼容性的问题】如果考虑兼容就需要另想动画效果的方案。3.props传参4.style标签当中的scope的用法以及详细解释【深度选择器方面的知识】.5方案的三种写法其实就是子组件控制父组件的三种方案【后来又多想到了一个方案就是子传父的】然后又想到了VueX（多方案无非就是子父传参的多总方式,还有事件总线等等等等）1.sync修饰符