Vue.js父子组件如何传参？

关于Vue父子组件如何传参，有几种常见的方式：

1. 使用props属性

Props（父组件向子组件传递数据）：父组件通过在子组件的标签上使用属性的方式，将需要传递的数据传递给子组件。子组件可以通过props选项接收并使用这些数据。

例子：

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

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

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

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

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

2. 使用$emit方法

$emit（子组件向父组件传递数据）：子组件通过调用 $emit方法，触发父组件监听的事件，并将需要传递的数据作为参数传递给父组件。

例子：

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

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

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

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

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

以上是Vue父子组件传参的两种常见方式，使用props可以实现父子组件之间的单向数据流动，$emit则可以实现子组件向父组件的数据传递。

3. 使用provide和inject

provide和inject：父组件可以通过provide提供数据，子组件通过inject注入这些数据。这种方式可以实现跨多个层级的组件通信。

例子：

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

<script>
export default {
  provide() {
    return {
      message: 'Hello from parent component',
    };
  },
};
</script>

// 子组件
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

4. 使用$parent 和 $children

$parent 和 $children：父组件可以通过 $children属性访问子组件实例，子组件可以通过 $parent属性访问父组件实例。但这种方式不够直观和推荐使用。

例子：

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

<script>
export default {
  mounted() {
    console.log(this.$children[0].message);
  },
};
</script>

// 子组件
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from child component',
    };
  },
  mounted() {
    console.log(this.$parent.message);
  },
};
</script>
 

以上是常见的父子组件传参方式，具体采用哪种方式取决于具体的场景和需求。