vue传参;vue传参的三种方式

Vue是一种流行的JavaScript框架，用于构建交互式的Web应用程序。在Vue中，我们经常需要在组件之间传递参数。介绍Vue中常用的三种传参方式：props、$emit和$attrs。

1. props

props是Vue中最常用的传参方式之一。通过在父组件中定义props属性，并在子组件中接收这些属性，我们可以实现父组件向子组件传递参数的功能。

在父组件中，我们可以使用v-bind指令将数据传递给子组件的props属性。例如：

  

    
  



import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
};

在子组件中，我们可以通过props属性接收来自父组件的参数。例如：

  

    
{{ message }}
  



export default {
  props: {
    message: String
  }
};

2. $emit

$emit是Vue中另一种常用的传参方式。通过在子组件中触发自定义事件，并在父组件中监听这些事件，我们可以实现子组件向父组件传递参数的功能。

在子组件中，我们可以使用$emit方法触发自定义事件，并传递参数。例如：

  

    Send Message
  



export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello Parent!');
    }
  }
};

在父组件中，我们可以使用v-on指令监听子组件触发的自定义事件，并接收参数。例如：

  

    
  



import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  methods: {
    receiveMessage(message) {
      console.log(message); // 输出：Hello Parent!
    }
  }
};

3. $attrs

$attrs是Vue中另一种传参方式，它用于将父组件中未被子组件props接收的属性传递给子组件的根元素。

在父组件中，我们可以使用v-bind指令将属性传递给子组件的根元素。例如：

  

    
  



import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  }
};

在子组件中，我们可以通过$attrs属性获取父组件传递过来的属性。例如：

  

    
{{ $attrs.message }}
  



export default {
  mounted() {
    console.log(this.$attrs.message); // 输出：Hello Vue!
  }
};

Vue中常用的三种传参方式：props、$emit和$attrs。props用于父组件向子组件传递参数，$emit用于子组件向父组件传递参数，$attrs用于将父组件中未被子组件props接收的属性传递给子组件的根元素。通过灵活运用这些传参方式，我们可以实现组件之间的数据交互，提高应用程序的灵活性和可扩展性。