Vue中父子组件传值

父传子

步骤：

代码结构图：

代码：

<template>
<div>
  <span  >{{datach}}</span>
</div>
</template>

<script>
export default {  
  name: "child",
  props:{
    datach:{
      type:String,
      default:""
    }
  }
}
</script>

<style scoped>

</style>

<template>
<div>
  <span>我是父亲</span>

  <child :datach="dataparent"></child>
</div>
</template>

<script>
import Child from "./child";
export default {
  name: "parent",
  components: {Child},
  data(){
    return{
      dataparent:"孩子的数据data"
    }
  }
}
</script>

<style scoped>

</style>

子传父

步骤：

代码结构图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2TnSTnDG-1642606648591)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220119233403266.png)]

代码：

<template>
<div>
  子组件:
  <span>{{childValue}}</span>
  <!-- 定义一个子组件传值的方法 -->
  <input type="button" value="点击触发" @click="childClick">
</div>
</template>

<script>
export default {
  name: "child",
  data () {
    return {
      childValue:"childValue",
      evidence: '我是子组件的数据'
    }
  },
  methods:{
    // childByValue是在父组件on监听的方法
    // 第二个参数this.childValue是需要传的值
    childClick(){
      this.$emit("materials", this.evidence)//触发 input 事件，并传入新值
    }
  }

}
</script>

<style scoped>

</style>

<template>
<div>
  <span>我是父亲</span>
  <br>
  <span>{{name}}</span>
  <br>
  <br>
  <child  @materials="getMaterials"></child>
</div>
</template>

<script>
import Child from "./child";
export default {
  name: "parent",
  components: {Child},
  data(){
    return{
      name: ''
    }
  },
  methods:{
    getMaterials(evidence) {
      // childValue就是子组件传过来的值
      this.name = evidence
    }
  }
}
</script>

<style scoped>

</style>