快速了解Vue父子组件传值以及父调子方法、子调父方法

在Vue中，组件通常会通过props属性传递数据，也可以使用$emit方法触发自定义事件来实现父调子方法和子调父方法。

父子组件传值

通过props属性传递数据

在父组件中使用props属性传递数据，子组件中使用props接收数据。比如：

<!-- 父组件 -->
<template>
  <div>
    <child-component :name="myName"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  },
  data () {
    return {
      myName: 'John'
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    My name is {{name}}
  </div>
</template>
<script>
export default {
  props: ['name']
}
</script>

这里，父组件中将myName数据通过props传递给子组件，在子组件中使用name来接收。

通过$emit方法触发事件传递数据

在子组件中使用$emit方法触发父组件中的自定义事件，将数据传递给父组件。比如：

<!-- 父组件 -->
<template>
  <div>
    <child-component @changeName="changeMyName"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  },
  data () {
    return {
      myName: 'John'
    }
  },
  methods: {
    changeMyName (newName) {
      this.myName = newName
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <input v-model="newName" @keyup.enter="changeName()">
    <button @click="changeName()">Change Name</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      newName: ''
    }
  },
  methods: {
    changeName () {
      this.$emit('changeName', this.newName)
      this.newName = ''
    }
  }
}
</script>

这里，子组件中使用$emit方法触发父组件中的changeName事件，并将newName数据传递给父组件。

父调子方法

为了使用父组件调用子组件的方法，我们需要先获取子组件的实例，可以使用ref属性来获取子组件的实例。比如：

<!-- 父组件 -->
<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="callChildMethod()">Call Child Method</button>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod () {
      this.$refs.child.childMethod()
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    This is Child Component
  </div>
</template>
<script>
export default {
  methods: {
    childMethod () {
      alert('This is child method')
    }
  }
}
</script>

这里，父组件中使用ref属性获取了子组件实例，并在调用子组件的childMethod方法。

子调父方法

为了使用子组件调用父组件的方法，我们同样可以使用$emit方法触发自定义事件，从而被父组件所监听。比如：

<!-- 父组件 -->
<template>
  <div>
    <child-component @callParentMethod="parentMethod"></child-component>
    <div>{{message}}</div>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  },
  data () {
    return {
      message: ''
    }
  },
  methods: {
    parentMethod (msg) {
      this.message = 'This is returned message from child: ' + msg
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <button @click="callParentMethod()">Call Parent Method</button>
  </div>
</template>
<script>
export default {
  methods: {
    callParentMethod () {
      this.$emit('callParentMethod', 'Hello, parent')
    }
  }
}
</script>

这里，子组件中调用了父组件中的parentMethod方法，并将数据'Hello, parent'传递给父组件。