Vue组件传值(高级)、属性传值、反向传值、跨级传值实例详解

在Vue中，组件传值是必不可少的一部分。组件间的传值分为父子组件传值、同级组件传值以及跨级传值等等，下面将详细介绍Vue组件传值的不同方式和实例。

属性传值

属性传值是父组件向子组件传递数据的一种方式，通过在父组件中使用子组件时设置props属性并传入数据，子组件在接收到数据后可以通过this.props或者$attrs来获取数据。下面是一个简单的例子：

<template>
  <div>
    <Child :name="name"></Child>
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  components: {
    Child
  },
  data () {
    return {
      name: "Alice"
    }
  }
}
</script>

在父组件中使用子组件时，使用了:name="name"来将父组件中的name数据传递给子组件，在子组件中通过props接收数据：

<template>
  <div>{{name}}</div>
</template>

<script>
export default {
  props: {
    name: String
  }
}
</script>

反向传值

反向传值是指从子组件向父组件传值。可以使用Vue的自定义事件来实现反向传值，原理是在子组件中通过$emit触发事件并将数据传递给父组件，在父组件中监听子组件的事件即可获取数据。下面是一个简单的例子：

<!-- 子组件 -->
<template>
  <div>
    <button @click="sendData()">点击</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('sendDataToParent', {name: 'Alice'});
    }
  }
}
</script>

在子组件中，this.$emit触发了一个名为sendDataToParent的事件，并同时传递了一个{name: 'Alice'}的对象作为数据，该事件会被派发到父组件。在父组件中监听该事件并接收子组件传递的数据：

<!-- 父组件 -->
<template>
  <div>
    <Child @sendDataToParent="getData"></Child>
    <div>{{data.name}}</div>
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  components: {
    Child
  },
  data () {
    return {
      data: {}
    }
  },
  methods: {
    getData(data) {
      this.data = data;
    }
  }
}
</script>

在父组件中通过在子组件上绑定自定义事件(sendDataToParent)，并设置事件回调函数getData来监听子组件的事件并获取数据。 getData方法中的data参数即为子组件通过$emit派发的事件对象中的数据。

跨级传值

有时，我们需要在不同层级的组件之间传递数据，这时可以通过在父组件中使用provide来提供数据，然后在所需的子组件中使用inject来注入数据。下面是一个简单的例子：

<!-- 父组件 -->
<template>
  <div>
    <Child :name="name"></Child>
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  provide: {
    name: 'Alice'
  },
  components: {
    Child
  }
}
</script>

在父组件中，通过provide向子组件提供了名为name的数据，子组件在需要获取数据时通过inject来注入数据：

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

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

在子组件中，使用了inject来注入父组件提供的name数据。

示例说明

示例1：从子组件向父组件反向传值

在这个示例中，我们将创建一个子组件，通过点击按钮向父组件传递一个数字，并在父组件中显示该数字。下面是完整的代码：

<!-- 子组件 -->
<template>
  <div>
    <button @click="increase()">增加</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      count: 1
    }
  },
  methods: {
    increase() {
      this.count++;
      this.$emit('update:count', this.count);
    }
  }
}
</script>

在子组件中，我们通过在按钮上绑定事件并在该事件中递增count数据，并通过$emit触发一个名为update:count的事件，并将count数据作为参数传递给父组件。注意这里使用了:update:count的语法糖来替代$emit('update:count',...)的写法，这也是Vue推荐使用的语法。

<!-- 父组件 -->
<template>
  <div>
    <Child :count="count" @update:count="updateCount"></Child>
    <div>当前数字为：{{count}}</div>
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  components: {
    Child
  },
  data () {
    return {
      count: 0
    }
  },
  methods: {
    updateCount(count) {
      this.count = count;
    }
  }
}
</script>

在父组件中，我们在使用子组件时通过:count="count"的语法糖将父组件中的count数据传递给子组件，并监听了一个名为update:count的事件，事件回调函数updateCount方法被触发时将子组件传来的count数据赋值给父组件中的count。

示例2：使用provide/inject跨级传值

在这个示例中，我们将创建两个组件，分别为父组件和子组件，通过在父组件中提供一个数字并在子组件中注入该数字，最后在子组件中显示该数字。下面是完整的代码：

<!-- 父组件 -->
<template>
  <div>
    <Child></Child>
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  provide: {
    count: 2
  },
  components: {
    Child
  }
}
</script>

在父组件中，我们通过provide提供一个名为count的数字2，供子组件使用。

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

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

在子组件中，我们使用inject来注入名为count的数据，并在模板中显示该数据。

结论

Vue组件传值是Vue开发中的一项核心技能，熟练掌握组件传值的不同方式及其原理对于提高开发效率和设计优化都非常有帮助。以上提供了一些常见的组件传值方式及示例，希望能够对Vue开发者有所帮助。