父子组件传值与组件封装

父子组件传值与组件封装

1 父子组件传值与组件封装的关系

1.1 父子组件的实现方式

父传子 通过 :message="message"实现 父组件定义属性 子组件传递值
子传父 通过 @update-message="updateMessage"实现 父组件定义事件 子组件传递方法

代码：

父组件:

<template>
  <div>
    <child :message="message" @update-message="updateMessage"></child> 
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  data() {
    return {
      message: 'Hello World'
    }
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage
    }
  }
}
</script>

子组件:

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  },
  methods: {
    updateMessage() {
      this.$emit('update-message', 'New Message')
    }
  }
}
</script>

2 父子组件传值解决了什么问题?

降低代码的耦合度,对于一些重复的模块，将其抽离出来统一封装为组件，只需要根据其值属性或事件属性传递对应的值，可以很好的提升代码的可复用型和灵活性