Vue组件传参的八种方式详解

<!-- 父组件 -->
<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

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

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

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>

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

<!-- 子组件 -->
<template>
  <button @click="sendMessage">发送消息给父组件</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('childMessage', '这是来自子组件的消息');
    }
  }
};
</script>

<!-- 父组件 -->
<template>
  <div>
    <child-component @childMessage="handleChildMessage"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildMessage(message) {
      console.log(message);
    }
  }
};
</script>

<!-- 父组件 -->
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: '这是通过provide/inject传递的消息'
    };
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>

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

<!-- 父组件（Parent.vue） -->
<template>
  <div>
    <h1>父组件</h1>
    <ChildComponent :name="parentName" :age="parentAge" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: { ChildComponent },
  data() {
    return {
      parentName: 'Tom',
      parentAge: 30
    };
  }
};
</script>

<!-- 子组件（ChildComponent.vue） -->
<template>
  <div>
    <h2>子组件</h2>
    <GrandChildComponent v-bind="$attrs" />
  </div>
</template>

<script>
import GrandChildComponent from './GrandChildComponent.vue';
export default {
  components: { GrandChildComponent }
};
</script>

<!-- 孙组件（GrandChildComponent.vue） -->
<template>
  <div>
    <h3>孙组件</h3>
    <p>父组件传递的名字：{{ name }}</p>
    <p>父组件传递的年龄：{{ age }}</p>
  </div>
</template>

<script>
export default {
  props: ['name', 'age']
};
</script>

<!-- 父组件（Parent.vue） -->
<template>
  <div>
    <h1>父组件</h1>
    <ChildComponent />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: 'Hello from Parent'
    };
  },
  methods: {
    parentMethod() {
      console.log('Parent method called');
    }
  }
};
</script>

<!-- 子组件（ChildComponent.vue） -->
<template>
  <div>
    <h2>子组件</h2>
    <button @click="callParentMethod">调用父组件方法</button>
  </div>
</template>

<script>
export default {
  methods: {
    callParentMethod() {
      this.$parent.parentMethod();
    }
  }
};
</script>

<!-- 父组件（Parent.vue） -->
<template>
  <div>
    <h1>父组件</h1>
    <ChildComponent />
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import ChildComponent from './ChildComponent.vue';
export default {
  components: { ChildComponent },
  computed: {
    ...mapState(['counter'])
  },
  methods: {
    ...mapMutations(['increment'])
  }
};
</script>

<!-- 子组件（ChildComponent.vue） -->
<template>
  <div>
    <h2>子组件</h2>
    <p>计数器：{{ counter }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
  computed: {
    ...mapState(['counter'])
  },
  methods: {
    ...mapMutations(['increment'])
  }
};
</script>

<!-- Vuex Store（store.js） -->
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    counter: 0
  },
  mutations: {
    increment(state) {
      state.counter++;
    }
  }
});

//子组件
<template>
  <div class="my-component">
    <slot></slot> <!-- 默认插槽 -->
  </div>
</template>
//父组件
<template>
  <MyComponent>
    <p>This is some default slot content!</p>
  </MyComponent>
</template>

//子组件（MyComponent.vue）
<template>
  <div class="my-component">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot> <!-- 默认插槽 -->
    </main>
    <footer>
      <slot name="footer"></slot><!--具名插槽-->
    </footer>
  </div>
</template>
//父组件
<template>
  <MyComponent>
    <template v-slot:header>
      <h1>Header Content</h1>
    </template>
    <p>This is some default slot content!</p>
    <template v-slot:footer>
      <p>Footer Content</p>
    </template>
  </MyComponent>
</template>

//子组件（MyComponent.vue）
<template>
  <div class="my-component">
    <slot :data="someData"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      someData: 'Hello from MyComponent!'
    };
  }
};
</script>
//父组件
<template>
  <MyComponent v-slot:default="slotProps">
    <p>{{ slotProps.data }}</p>
  </MyComponent>
</template>

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

<template>
  <button @click="sendMessage">Send Message to ComponentB</button>
</template>

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

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message-from-a', 'Hello from Component A!');
    }
  }
};
</script>

<template>
  <div>
    <p>Message from ComponentA: {{ message }}</p>
  </div>
</template>

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

export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    EventBus.$on('message-from-a', (msg) => {
      this.message = msg;
    });
  },
  beforeDestroy() {
    EventBus.$off('message-from-a');
  }
};
</script>