Vue父子组件传值（操作流程）

Vue父子组件传值

1.父传子（props)

需要在vue实例中添加props事件，如下所示

父组件template

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <div>{
   
   { message }}</div>
    父组件:
    <input type="text" v-model="name">
    <br>
    <br>
    <!-- 引入子组件 -->
    <HelloWorld :inputName="name"></HelloWorld>
  </div>
</template>

父组件js

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
    
    
  name: 'App',
  data(){
    
    
    return {
    
    
      name: '',
    }
  },
  components: {
    
    
    HelloWorld
  },
}
</script>

子组件

<template>
  <div class="hello">
    子组件:
    <span>{
    
    {
    
    inputName}}</span>
  </div>
</template>

<script>
export default {
    
    
  name: 'HelloWorld',
  props: {
    
    
    inputName: String
  }
}
</script>

2.子传父

父组件template

<template>
  <div>
    父组件:
    <span>{
   
   {name}}</span>
    <br>
    <br>
    <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
    <HelloWorld v-on:childByValue="childByValue"></HelloWorld>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
    
    
  name: 'App',
  components: {
    
    
    HelloWorld
  },
  data () {
    
    
    return {
    
    
      name: ''
    }
  },
  methods: {
    
    
    childByValue: function (childValue) {
    
    
      // childValue就是子组件传过来的值
      this.name = childValue
    }
  }
}
</script>

子组件

<template>
  <div>
    子组件:
    <span>{
    
    {
    
    childValue}}</span>
    <!-- 定义一个子组件传值的方法 -->
    <input type="button" value="点击触发" @click="childClick">
  </div>
</template>
<script>
  export default {
    
    
    data () {
    
    
      return {
    
    
        childValue: '我是子组件'
      }
    },
    methods: {
    
    
      childClick () {
    
    
        // childByValue是在父组件on监听的方法
        // 第二个参数this.childValue是需要传的值
        this.$emit('childByValue', this.childValue)
      }
    }
  }
</script>

3.子传子