- 博客(36)
- 收藏
- 关注
RSS订阅原创 Vue3.x动态路由、命名路由和编程式导航
两种方法 ： 1.路由中的动态传参以 : 进行声明，冒号后面跟的是动态参数名（path: 'apple/:mid'），通过{{ $route.params.mid }}进行接收 2.声明属性props:true，选项，以props的形式接收动态路由中的参数2.编程式导航 this.$router.push() --- 通过匹配path路径进行条装 this.$router.go(-1) --- 返回上一级
2022-10-16 18:06:29
653
1
原创 VUE3.X组件之间的传值
子向父传值的双向绑定：父组件使用v-model，子组件使用update:属性名 2.1、调用子组件的时候定义一个ref2.2、父组件主动获取子组件数据2.3、父组件主动执行子组件方法3.1、子组件主动获取父组件的数据3.3、子组件主动获取父组件的方法 4.0 使用mitt之前先安装mitt模块4.1、新建model/event.js4.2、组件14.3、组件2
2022-09-29 20:30:08
1088
原创 数组的some()、forEach()、every()、reduce()方法的使用
【代码】数组的some()、forEach()、every()、reduce()方法的使用。
2022-09-22 16:24:05
204
原创 Vue中的父子组件传值
在子组件中使用$emit()方法进行传值。要在子组件中声明props进行接收。二、子组件A（接收父组件的值）三、子组件B（向父组件传值）
2022-09-21 17:34:17
170
原创 Vue组件传值-设置默认值
1.default： 设置默认值。3.require：设置必填项。·FirstOVue接收父组件传过来的值。2.type：设定传值类型。·App.vue父组件调用子组件。
2022-09-14 19:18:17
3008
1
原创 mobx模块化
1.定义独立的countes模块和list模块2.在index.js导入 拆分的模块3.使用React的 useContext机制导出统一的useStore方法 代码示例：listStore.js index.jsApp.js
2022-06-21 20:25:33
370
1
原创 mobx中的computed实现
1.定义一个数据2.定义get属性，编写一个计算公式3.在makeAutoObservable方法中进行标记代码示例：countes.js渲染数据App.js
2022-06-21 19:35:25
545
原创 mobx环境配置
1.创建react项目，初始化2.安装mobx和mobx-react-lite1.定义数据状态2.数据响应式处理3.定义一个函数4.实例化并将实例导出1.导入countStore实例2.使用实例中的数据3.修改实例中的数据4.让试图响应数据变化...
2022-06-20 10:57:16
195
原创 React编程式导航-跳转携带参数
场景：有些时候不光需要跳转路由还需要传递参数两种方式： App.js #路由配置 Login.js #跳转到detail页面并进行传参 Detail.js #取参2.params传参 App.js #路由配置Login.js #跳转到detail页面并进行传参Detail.js #取参......
2022-06-08 19:33:53
1859
原创 Reacr编程式导航-跳转
作用：通过js编程的方式进行路由页面跳转语法说明： 1.导入useNavigate 2.执行useNavigate得到一个跳转函数 3.调用跳转函数传入目标路径注意：如果在跳转时不想加历史记录，可以添加额外的参数replace为true例如：登录页跳转到关于页login.jsApp.js......
2022-06-08 18:02:11
608
原创 useContext的使用
使用步骤：导入 ，使用 创建Context对象在顶层组件通过 提供数据在底层组件通过函数获取数据代码实例： 1.顶层组件2.底层组件SonA 3.底层组件SonB 完整代码实例运行结果：
2022-06-04 20:26:39
348
原创 useRef的使用
使用步骤：首先导入useRef，然后执行useRef函数并传入null，内部有一个current属性存放拿到的dom对象，之后通过ref绑定要获取的元素或者组件代码实例：运行结果：
2022-06-04 19:40:25
862
原创 useEffect发送网络请求
在useEffect中请求接口，在该方法中封装同步操作相当于类组件中的钩子函数useEffect的执行时机在其他文章有介绍，地址：CSDNhttps://mp.csdn.net/mp_blog/creation/editor/125008439
2022-06-02 17:18:01
583
原创 Hooks的useEffect基础使用
useEffect的作用：为react函数组件提供副作用处理1.不添加依赖项useEffect组件初始化会执行一次，然后每次组件更新都会调用一次import { useEffect, useState } from 'react'function App () { const [num, setNum] = useState(0) //默认状态，不添加依赖项 useEffect(()=>{ console.log(num+'副作用执行') }) ret
2022-05-27 17:58:32
348
原创 React的hooks中的useState基础使用
useState下状态的读取和修改1.首先导入useState函数2.调用useState函数并传入初始值代码示例：import { useState } from 'react'function App() { //参数1，参数2名字可以自定义，但是顺序不能改变，0为传入的初始值 const [num, setNum] = useState(0) return ( <button onClick={() => { setCount(num +
2022-05-26 20:44:25
825
原创 React生命周期
钩子 函数 触发时机 constructor 创建组件时，最先执行，初始化的时候只执行一次 render 每次组件渲染都会触发（注意： 不能在里面调用setState() 会陷入死循环） componentDidMount 组件挂载（完成DOM渲染）后执行，初始化的时候执行一次 componentDidUpdate 组件更新后（DOM渲染完毕） componentWillUnmount 组件卸载（从页面中消失） 注意：只有类组件才有生命周期 组
2022-05-24 19:50:03
79
原创 React的props校验-默认值
1.函数组件的校验-默认值//第二种方法直接在函数解构中赋值 （推荐使用）function SonA ({ page=10 }) { return ( <> <p>{page}</p> </> )}//第一种方法使用defaultProps （不推荐）//SonA.defaultProps = {// page: 10//}class App extends Component { render
2022-05-21 17:56:44
906
原创 React的props校验规则
propstypes校验的四种常见结构 常见类型：array、bool、func、number、object、string、symbol React元素类型：element 必填项：isRequired 特定的结构对象：shape({}) 实现步骤 安装属性校验包：yarn add prop-types 导入import PropTypes from "prop-types" 使用 组件名.propTypes = {添加校验规则}..
2022-05-21 13:02:26
274
原创 React组件通信中的props的children属性
children属性是表示该组件的子节点，只要组件内部有子节点，props中就有该属性children可以是什么 普通文本 普通标签元素 函数 JSX 代码实例1.普通文本function SonA(props){ return( <> <p>{props.children}</p> </> )}class Ap..
2022-05-21 11:58:37
929
原创 React跨组件通信context
创建Context对象 导出 Provider 和 Consumer对象//解构createContext()const { Provider, Consumer } = createContext()使用Provider包裹根组件提供所需要的数据<Provider value={this.state.message}> {/* 这里放根组件 */}</Provider>需要用到数据的组件使用Consumer包裹获取数据<Consumer > {value => /* v
2022-05-20 16:07:25
148
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人