- 博客(21)
- 收藏
- 关注
原创 React 父向子传值
import React from 'react'/* 实现父子通信中的父传子,把父组件中的数据传给子组件 实现步骤: 1.父组件提供要传递的数据 state 2.给子组件标签添加属性值为satate中的数据 3.子组件中通过props获取数据 1.类组件中通过this.props获取 2.函数组件中通过props获取(需要传参props)注意事项:1.props是只读对象,不能进行修改2.props可以传递任何数据数字、字符串、布尔值、对象、数组、函数、jsx元..
2022-05-10 19:45:32 857
原创 React 受控组件
//受控组件//React组件状态的地方实在state中,input表单元素也有自己的状态实在value中,//React将state与表单元素的值(value)绑定在一起,由state的值控制表单元素的值,从而保证单一数据源特性。/** * 实现步骤 * 1.在组件的state中声明一个组件的状态数据 * 2.将state状态数据设置为input标签元素的value属性的值 * 3.为input标签元素绑定onChange事件 * 4.在事件处理程序中,通过事件对象e获取到当前文本框的..
2022-05-10 19:44:51 136
原创 React 修改数据
import React from "react"class Test extends React.Component { state = { count: 0, list: [1, 2, 3, 4, 5], person: { name: '张三', age: 18 } } //修改数据(不要直接修改状态的值,而是基于当前状态值创建新的状态值) //添加数据 changeState = () => { this.setState({..
2022-05-10 19:44:10 1425
原创 React jsx-counter组件实例
import React from "react"class Test extends React.Component { state = { count: 0 } render () { return ( <div> <button onClick={() => { this.setState({ count: this.state.count + 1 }) }}>{this.state.count}<..
2022-05-10 19:43:20 143
原创 React jsx-修改事件状态
import React from "react"class Test extends React.Component { state = { name: 'zhangsan' } ChangeState = () => { this.setState({ name: 'lisi' }) } render () { return ( <div> this is test 当前name为:..
2022-05-10 19:40:47 115
原创 React 函数创建和渲染
import React from "react"//函数组建的创建和渲染//创建// 1.组件名称必须首字母大写,react内部会根据这个来判断是否是组件还是普通的HTML标签//2.函数组件必须有返回值,表示UI结构,如果不需要渲染的话,可以返回null//3.组件就像HTML标签,可以被渲染到页面上,对于函数组件来说,渲染的内容是返回的值//4.使用函数名称作为组件标签名称,在页面上使用时,就是使用函数名称//如何获取事件对象e?//只需要在函数组件中传入参数e就可以获取事件对象..
2022-05-10 19:39:58 792
原创 React jsx样式控制
//jsx样式控制//1.行内控制 -在元素身上绑定一个style属性//2.类名控制 -在元素身上绑定一个className属性import './app.css'const name='zhangsan'const style = { color: 'red', fontSize: '30px'}//动态控制一下这个active类名。const isActive = truefunction App () { return ( <div classN..
2022-05-10 19:39:09 237
原创 React精简模板
//有一个type状态 1 2 3//1 -> h1//2 -> h2//3 -> h3//原则:模板中的逻辑尽量保持精简//复杂的多分枝的逻辑,收敛为一个函数 通过专门的函数来写分支逻辑 模板中只负责调用即可const getHtag = (type) => { if (type === 1) { return <h1> this is h1 </h1> } if (type === 2) { retur..
2022-05-10 19:38:17 250
原创 React条件渲染
//条件渲染//技术方案:三元表达式(常用)逻辑&&运算//1.三元表达式 -满足条件才渲染一个span标签//2.&&const flag=truefunction App() { return ( <div className="App"> {flag ? ( <div> <span> this is span</span> </div&g..
2022-05-10 19:37:18 178
原创 react如何完成列表渲染
//识别常规变量const name = '张三'//react如何完成列表渲染//技术方案:map 重复渲染的是那个模板,就return谁//注意事项:在遍历列表时同样需要一个类型为number/string不可重复的key,提高diff性能//key仅仅在内部使用,不会出现在真实的dom结构中const songs = [ { id: 1, name: '说散就散' }, { id: 2, name: '稻香' }, { id: 3, name: '龙拳' }, { i..
2022-05-10 19:32:15 208
原创 自定义指令
自定义指令当指令第一次被绑定到元素上的时候,会立即触发发bind函数形参中的el表示当前指令绑定到的那个DOM对象。我们还可以在data中自定义一个color:blue ,然后在将值传给v-color="color"。如果我们想修改为红色,可data数据中没有red属性,我们不能只写为v-color:"red"。原因是vue在data中找不到red,但我们可以写为v-color:"‘red’"!那我们如何拿到data中color的值呢?我们可以在bind中传递一个bindi.
2021-12-07 12:20:53 68
原创 插槽slot
插槽(slot)是vue组件的封装者提供的能力。允许开发者在组装组件时,把不确定、希望由用户指定的部分定义为插槽。slot的name属性vue官方规定每一个slot插槽,都要有一个name名称,如果省略了slot的那么属性,则会有一个默认名称叫做default。默认情况下,在使用组件的时候,提供的内容会被填充到名字为default的插槽中。1.如果要把内容填充到指定名称的插槽中,,要使用v-slot指令2.v-slot指令后面要跟上插槽的名字3.v-slot指令不能直接.
2021-12-06 19:55:56 420
原创 keep-alive组件
keep-alive基本用法作用:防止组件被隐藏的时候被销毁了使用方法:直接在想要作用的组件上添加标签<keep-alive></keep-alive>keep-alive 可以把内部的组件进行缓存,而不是销毁组件keep-alive对应的生命周期当组件第一次被创建的时候,会执行created生命周期,也会执行activeted生命周期,当组件被激活的时候,只会触发activated生命周期,不在触发created。因为组件没有被重新...
2021-12-06 19:54:14 318
原创 如何实现动态组件渲染
1.component标签是vue内置的,作用:组件的占位符2.is属性值,表示要渲染的组件名字3.is属性值,应该是组件在components节点下注册的名称
2021-12-06 19:52:05 205
原创 子组件向父组件传递共享数据
$emit中第一个参数是自定义事件的名称,类似click,第二个参数是要传递的值在父组件中要调用自定义事件(方法和调用click事件一样 @click=“ ”),再通过val接受子组件传递过来的值
2021-12-04 16:28:15 348
原创 vue父组件向子组件传值
父组件向子组件传递共享数据:父组件中,通过子组件的标签进行传值,通过v-bind去绑定这些属性值,在子组件中通过props去声明这些自定义属性。(或者可以理解为通过props进行接收数据)tips:一定要在父组件中注意导入vue的包,否则无法渲染插值表达式如何修改props中的值不建议修改props中的值如果非要修改props中的值可以通过图示进行修改...
2021-12-04 15:19:04 378
原创 props组件
props是自定义属性,允许使用者通过自定义属性,为当前组件指定初始值自定义属性的名字,是封装者自定义的只要合法就可以。props可以结合v-bind一起使用:props给属性传递的是一个字符串,如若想传递一个数字可在属性名称前添加v-bind或者添加:props中的数据可以直接在模板结构中渲染使用,但是props是只读的(功能上可以实现修改,但直接修改容易造成props中的数据被覆盖,所以不建议修改props中的数据,造成终端报错)如果想实现props中数据修改的功能,可.
2021-12-03 18:34:11 705
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人