[Vue] 7. Vue素子開発プレミアム編-7)同期親素子中性子素子のデータ値

9853 ワード
vue テキストリンク

親構成部品からの子構成部品のデータ値の同期


前にサブアセンブリから親アセンブリへのCustomイベントがあり、データが渡されます.しかし、実務では、非常に不便な仕事です.したがって、サブコンポーネントで定義されたデータが値を変更する理由にかかわらず、親コンポーネントで常に監視されます.これにより、サブコンポーネントで親コンポーネントとしてカスタムイベントが発生しながらデータを渡す必要がなくなります.
// DataBindingExample.vue
<template>
  <div>
    <button type="button" @click="showData">부모 버튼</button>
    <ChildComponent ref="child_component" />
    <h1>{{ parentMsg }}</h1>
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  components: { ChildComponent },
  data() {
    return {
      parentMsg: "",
    };
  },
  computed: {
    msg() {
      return this.$refs.child_component.msg;
    },
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {
    showData() {
      //alert(this.msg);
      this.parentMsg = this.msg;
    },
  },
};
</script>

<style scoped></style>

// ChildComponent.vue
<template>
  <div>
    <button type="button" @click="changeData">자식 컴포넌트 데이터 변경</button>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      msg: "자식 컴포넌트로부터 보내는 메시지",
    };
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {
    changeData() {
      this.msg = "자식 컴포넌트에서 데이터 변경이 일어났습니다.";
    },
  },
};
</script>

<style scoped></style>
スレッド通信(同期起動メカニズム)-生産者と消費者
[w5d5] Histogram Stretch, Filtering