vue组件间属性传值的常用的方法和规范详解

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

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      dataFromParent: '这是来自父组件的数据'
    };
  }
};
</script>

<template>
  <div>
    {{ parentData }}
  </div>
</template>

<script>
export default {
  props: {
    parentData: String
  }
};
</script>

<template>
  <div>
    <button @click="sendDataToParent">发送数据到父组件</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      this.$emit('dataToSend', '这是子组件发送的数据');
    }
  }
};
</script>

<template>
  <div>
    <child-component @dataToSend="handleDataFromChild"></child-component>
  </div>
</template>

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

​​​​​​​export default {
  components: {
    ChildComponent
  },
  methods: {
    handleDataFromChild(data) {
      console.log(data); // 输出：这是子组件发送的数据
    }
  }
};
</script>

// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();

<template>
  <div>
    <button @click="sendData">发送数据到兄弟组件</button>
  </div>
</template>

<script>
import { EventBus } from './event-bus.js';

​​​​​​​export default {
  methods: {
    sendData() {
      EventBus.$emit('data-to-brother', '这是来自兄弟组件A的数据');
    }
  }
};
</script>

<template>
  <div>
    <div>{{ dataFromBrother }}</div>
  </div>
</template>

<script>
import { EventBus } from './event-bus.js';

​​​​​​​export default {
  data() {
    return {
      dataFromBrother: ''
    };
  },
  created() {
    EventBus.$on('data-to-brother', this.receiveData);
  },
  methods: {
    receiveData(data) {
      this.dataFromBrother = data;
    }
  },
  beforeDestroy() {
    EventBus.$off('data-to-brother', this.receiveData);
  }
};
</script>

data() {
  return {
    dataFromBrother: ''
  };
}

created() {
  EventBus.$on('data-to-brother', this.receiveData);
}

methods: {
  receiveData(data) {
    this.dataFromBrother = data;
  }
}

beforeDestroy() {
  EventBus.$off('data-to-brother', this.receiveData);
}

import Vue from 'vue';
export const EventBus = new Vue();

// 兄弟组件
import { EventBus } from './event-bus.js';

export default {
  methods: {
    sendData() {
      const dataToSend = 'Hello from brother component';
      EventBus.$emit('data-to-brother', dataToSend);
    }
  }
};

<template>
  <div>
    <descendant-component />
  </div>
</template>

<script>
import DescendantComponent from './DescendantComponent.vue';

​​​​​​​export default {
  components: {
    DescendantComponent
  },
  provide() {
    return {
      crossLevelData: '这是跨级传递的数据'
    };
  }
};
</script>

<template>
  <div>
    {{ crossLevelData }}
  </div>
</template>

<script>
export default {
  inject: ['crossLevelData']
};
</script>