React父传子和子组件触发修改父组件修改数据

Posted 2023-05-11

参考技术A

子组件是不可以直接修改props的,只能通过触发父组件的方法来修改
父传子通过子组件标签上定义属性后传入this.state的数据

vue父传子

父组件传递数据给子组件用props，父组件中使用子组件，子组件用props接收父组件数据。

Home父组件代码：

<template>
<div>
     {{test}}
     <!-- 使用子组件,绑定父组件数据数据 -->
    <Child :test="test"></Child>
</div>
</template>
<script>
// import子组件
import Child from ‘./Child.vue‘
export default {
  name: "Home",
  //components引入子组件
  components:{
      Child
  },
  data () {
    return {
        test:123
    };
  }
}
</script>
<style lang="css" scoped>
</style>

Child子组件代码：

<template>
<div>
    <!-- 使用子组件数据 -->
     {{test}}
</div>
</template>
<script>
export default {
  name: "Child",
//   props使用获取父组件数据
  props:["test"],
  data () {
    return {
        
    };
  },
  created(){
    //   使用子组件数据
      console.log(this.test);
      
  }
}
</script>
<style lang="css" scoped>
</style>