Vue的组件传值详解

Vue组件的传值操作

读者原本想写的仔细一点点，但是因为时间匆忙，所以内容就稍微精简一点。

因为在使用的时候需要用到组件的传值操作。

组件传值的作用：使代码具有更好的可维护性，让语言更加简洁，便于修改。

组件的传值分为两种类型：

1、数组传值

代码举例：

组件：

 

组件通过props进行传值，数组传值.

在组件javascript内部可以通过this.索引名进行调用

在<template></template>直接通过索引名来进行调用

在调用组件的页面：

组件赋值，如果是字符串类型直接通过索引名：字符串，如果是其他需要解析的类型如对象，则需要通过v-bind或:进行绑定操作，此时编译器会将v-bind:索引名:后面的部分视为javascript语言。

 

案例如下：

Vue.component('blog-post', {

  props: ['post'],

  template: `

    <div class="blog-post">

      <h3>{{ post.title }}</h3>

      <button>

        Enlarge text

      </button>

      <div v-html="post.content"></div>

    </div>

  `

})

<div id="blog-posts-events-demo">

  <div :style="{ fontSize: postFontSize + 'em' }">

    <blog-post

      v-for="post in posts"

      v-bind:key="post.id"

      v-bind:post="post"

    ></blog-post>

  </div>

</div>

 

2、以对象的形式进行从传值

以对象的形式进行传值，需要明确类型，会有类型检验机制。

如下：

props: {

  title: String,

  likes: Number,

  isPublished: Boolean,

  commentIds: Array,

  author: Object,

  callback: Function,

  contactsPromise: Promise // or any other constructor

}

以键值对的形式，每个键的值都是其类型名称，Vue中可选的类型有：

type 可以是下列原生构造函数中的一个：

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

然后，值的注意的是不同类型的传值方式是不同的，下面是一个对象传值的一个例子。

赋值：

<template>
    <div class="Home">
          <div class="obj"><Piechart :size="size"    classname="Piechart"></Piechart></div>
    </div>
</template>
<script>

import Piechart from "@/components/echarts/Piechart";
export default {
    name:"Home",
    data(){
      return {
        size:{width: '400px', height: '300px'}

      }
    },
    components:{
      Piechart,
 },

methods:{
},
}
</script>

 

 

调用：

<template>
  <div :id="name" :class="name" :style="size"></div>
</template>

<script>
    export default {
      name: this.name,
      props:{
        size:Object,
        classname:String,
      },
        data(){
          return {
            name:this.classname
          };
        },

}

 

在这部分，我们通过v-bind进行赋值，因为我们在声明类型的时候声明size的类型为Object因此我们传值的时候，data部分的size赋值两边没有引号。props对象的赋值和调用类似数组，细节部分就不进行详细说明。

其他部分，需要注意的是，如果传值内容是整形，则data部分应该为size:1而不是’1’。