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’。

最后

以上就是羞涩云朵为你收集整理的Vue的组件传值详解的全部内容，希望文章能够帮你解决Vue的组件传值详解所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。