Vue传参一箩筐(页面、组件)

Vue是一款流行的前端框架，组件和页面之间传递数据是很常见的需求。本篇文章就来分享一些Vue传参的实践经验。

传递基础数据类型

在组件中使用props

使用props属性可以从父组件向子组件传递数据。在子组件的<script>标签中定义一个对象，对象的key就是数据的属性名，value就是数据的默认值：

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

<script>
export default {
  props: {
    message: {
      type: String,
      default: "Hello World"
    }
  }
}
</script>

在父组件中把message属性赋上数据即可进行传递：

<template>
  <child message="Hi there!"></child>
</template>

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

export default {
  components: {
    Child
  }
}
</script>

这样就可以把数据传递到Child组件中并显示出来了。

在页面中传递数据

在Vue页面中传递数据比在组件中简单，直接使用data属性即可：

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

<script>
export default {
  data() {
    return {
      message: "Hello World"
    }
  }
}
</script>

在Vue页面中也可以很方便地通过计算属性和方法来传递数据，这里就不再赘述。

传递复杂数据类型

在组件中使用prop类型定义问题

在组件中传递复杂数据类型时，定义props时必须指定数据类型，否则Vue会抛出警告。props可以定义多个属性，这样就可以传递复杂数据类型了。

<template>
  <div>
    {{ message }}
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: "Hello World"
    },
    items: {
      type: Array,
      default: function() {
        return []
      }
    }
  }
}
</script>

父组件中的传递方式也需要相应地更改：

<template>
  <child :message="msg" :items="list"></child>
</template>

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

export default {
  components: {
    Child
  },
  data() {
    return {
      msg: "Hi there!",
      list: ["item1", "item2", "item3"]
    }
  }
}
</script>

在组件中使用类似于 Vuex 的 store

当组件之间需要共享数据时，可以使用类似于 Vuex 的 store。在store中定义数据后，可以通过组件中的computed属性获取store中的数据。

// store.js
import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    message: "Hello Vuex"
  }
})

// Child.vue
<template>
  <div>{{ message }}</div>
</template>

<script>
import { mapState } from "vuex"

export default {
  computed: mapState([
    "message"
  ])
}
</script>

// App.vue
<template>
  <child></child>
</template>

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

export default {
  components: {
    Child
  },
  store
}
</script>

在这个示例中，store中的state的message属性被映射到了Child组件的message属性中。

以上便是Vue传参的基本攻略，希望对你有所帮助。