vue2中组件传参方式

1、props(父组件向子组件)

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

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  }
};
</script>

在上述例子中，父组件通过message属性向子组件传递了parentMessage的值。注意，通过使用冒号(:)将message属性绑定到父组件的parentMessage数据。

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

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

在子组件中，通过props属性声明了一个名为message的属性。这样，子组件就能够接收并使用父组件传递的值。

在上面的例子中，子组件简单地将message渲染为<h1>标签内的文本。由于父组件传递了parentMessage的值给子组件的message属性，因此子组件会渲染出Hello from parent。

通过props属性，父组件可以向子组件传递任意类型的数据，包括字符串、数字、对象等。子组件可以通过在props属性中声明需要接收的属性来访问这些值。

需要注意的是，在子组件中，props是只读的，不能直接修改父组件传递的值。如果需要在子组件中修改这些值，可以使用事件或vuex等状态管理工具来进行通信.

---

$emit（子组件向父组件传递数据）

<!-- 父组件 -->
<template>
  <div>
    <ChildComponent @childEvent="handleChildEvent" />
    <p>{{ childData }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      childData: ''
    };
  },
  methods: {
    handleChildEvent(data) {
      this.childData = data;
    }
  }
};
</script>

在上述例子中，父组件定义了一个名为childData的响应式数据，并定义了一个handleChildEvent方法，用于接收子组件传递的数据。

<!-- 子组件 -->
<template>
  <div>
    <button @click="sendDataToParent">传递数据给父组件</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      const data = 'Hello from child';
      this.$emit('childEvent', data);
    }
  }
};
</script>

在子组件中，通过点击按钮触发sendDataToParent方法。该方法中使用this.$emit触发了一个名为childEvent的自定义事件，并传递了数据'Hello from child'。

在父组件中，使用@childEvent监听子组件触发的childEvent事件，并通过handleChildEvent方法接收子组件传递的数据并更新childData。

通过自定义事件和$emit方法，子组件能够向父组件传递数据。在上述例子中，当点击子组件中的按钮时，将会触发自定义事件并将数据传递给父组件，最终在父组件中渲染出子组件传递的数据.

---