子组件如何改变父组件的state

子组件调用父组件的方法,从而改变父组件中state中的值

//父组件
change (value) {
    console.log(value)
    this.setState({
      red: value.red
    })
    console.log(this.state)
  }
render () {
    return (
      <>
        {this.state.red && this.state.red == 1 ? (
          <div>red == 1</div>
        ) : null}
        <Child childChangeFather={this.change.bind(this)}></Child>
      </>
    )
  }
//子组件
render () {
    <>
      <div onClick={() => {this.props.childChangeFather({red: 1})}}>子组件如何改变父组件的state</div>
    </>
  }

原文地址:https://www.cnblogs.com/pcxhahaha/p/12359541.html

时间: 2024-08-28 16:46:01

子组件如何改变父组件的state的相关文章

组件之间的通信(子组件-改变父组件的值)

在vue中,组件之间的通信,是不建议子组件改变父组件的值,因为一个父组件有可能会有很多子组件,改来改去会很难管理(别人都这样说,我信) 试试: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src='../vue.js'> </script> </head> <bod

Vue:子组件如何跟父组件通信

我们知道,父组件使用 prop 传递数据给子组件.但子组件怎么跟父组件通信呢?这个时候 Vue 的自定义事件系统就派得上用场了. 使用 v-on 绑定自定义事件 每个 Vue 实例都实现了事件接口,即: 使用 $on(eventName) 监听事件 使用 $emit(eventName, optionalPayload) 触发事件 Vue 的事件系统与浏览器的 EventTarget API 有所不同.尽管它们运行起来类似,但是 $on 和 $emit 并不是addEventListener 和

父组件如何获取子组件数据,子组件如何获取父组件数据,父子组件如何传值

1.父组件如何主动获取子组件的数据 方案1:$children $children用来访问子组件实例,要知道一个组件的子组件可能是不唯一的,所以它的返回值是个数组 定义Header.HelloWorld两个组件 <template> <div class="index"> <Header></Header> <HelloWorld :message="message"></HelloWorld>

vue子组件值跟着父组件改变

父组件 <template> <div id="list"> 父组件的值<input type="text" v-model="parentVal"> <div> <child :inputData="parentVal"></child> </div> </div> </template> <script>

vue.js组件之间通讯--父组件调用子组件的一些方法,子组件暴露一些方法,让父组件调用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"></div></body><script src="node_modules/vue/

vue2.0中子组件通过v-modal改变父组件中的值

父组件代码: <template lang="pug"> div p this is father child(v-model="data") </template> <script> import child from "./childrenS.vue"; export default{ data(){ return { data: [1, 2, 3] } }, components: { child },

vue 子组件传值给父组件

子组件通过this.$emit("event",[args,....]),传值给父组件 HTML部分: 1 <div id="app"> 2 <tmp1 @func="test"></tmp1> 3 </div> JS部分: 1 var app = new Vue({ 2 el: "#app", 3 data: {}, 4 methods: { 5 test(data) { 6

vue3 子组件动态接受父组件的传值

最近边学vue边做项目demo,也是苦,一路磕磕碰碰,遇到很多值得学习的问题都没来得及整理. 忙里偷闲悄悄记一笔先,我怕回头看又得琢磨 今天研究的是如何父组件动态改变子组件的props属性内容,子组件要监听到变化并作出回应. 功能描述:一个图+一张表+按钮控制 实现:点击数据行或者按钮,图形跟着变化 直接贴效果: 其中我的图跟table是两个独立的子组件 组件通信就不重复介绍了,可以参考我的上一篇 大致思路:数据控制是二维的,不同按钮代表不同类型,table数据行代表一个类型下的某一个类别数据吧

vue子组件向传父组件传值

子组件: <template>     <div class="app">        <input @click="sendMsg" type="button" value="给父组件传递值">     </div> </template> <script> export default {       data () {         return