从Vue组件入手解析跨级组件间数据传递的奥秘

2023-09-13 18:16:28

组件及其全局与局部之分

组件是构建Vue应用程序的基本元素。组件可以是全局的，也可以是局部的。全局组件可以在任何地方使用，而局部组件只能在定义它们的Vue实例中使用。

父子组件间传值

父子组件间的数据传递是Vue组件间数据传递最常见的情况。父组件可以向下传递数据到子组件，子组件也可以向上传递数据到父组件。

父向子传值

父组件向子组件传值可以使用props。props是只读的，子组件不能修改props的值。

<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from parent!'
    }
  }
}
</script>

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message']
}
</script>

子向父传值

子组件向父组件传值可以使用自定义事件。自定义事件是子组件派发的，父组件监听这些事件并作出相应反应。

<template>
  <div>
    <button @click="sendMessage">Send message</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello from child!')
    }
  }
}
</script>

<template>
  <div>
    <child-component @message="handleMessage"></child-component>
  </div>
</template>

<script>
export default {
  methods: {
    handleMessage(message) {
      console.log(message)
    }
  }
}
</script>

父子组件间传递非props属性

在某些情况下，我们需要在父子组件间传递非props属性。例如，我们可能需要在子组件中访问父组件的data属性。我们可以使用$parent属性来访问父组件的实例。

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from parent!'
    }
  }
}
</script>

<template>
  <div>
    <p>{{ $parent.message }}</p>
  </div>
</template>

<script>
export default {
}
</script>

关系型组件间传值

关系型组件间的数据传递是指在不直接嵌套的情况下，组件之间的数据传递。例如，我们可以通过父组件进行数据中转，或者使用root和children属性来访问其他组件的实例。

通过父组件进行数据中转

我们可以通过父组件来中转数据。例如，我们可以将数据存储在父组件的data属性中，然后将这些数据传递给子组件。

<template>
  <div>
    <child-component :data="data"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {
        message: 'Hello from parent!'
      }
    }
  }
}
</script>

<template>
  <div>
    <p>{{ data.message }}</p>
  </div>
</template>

<script>
export default {
  props: ['data']
}
</script>

使用root和children属性

我们可以使用root属性来访问根组件的实例，使用children属性来访问子组件的实例。例如，我们可以使用$root属性来将数据广播到所有子组件。

<template>
  <div>
    <child-component></child-component>
    <child-component></child-component>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$root.$emit('message', 'Hello from root!')
  }
}
</script>

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$on('message', (message) => {
      console.log(message)
    })
  }
}
</script>