前端学习笔记——Vue3组件间数值传递

依据个人的学习需求，对Vue官网中组件部分内容的搬运和总结，可用于参看，想详细了解Vue3这部分特性的可以直接参考官网内容：https://cn.vuejs.org

props是一种特别的attributes，我们可以在组件上生命注册。比如：如果我们要传递给博客文章组建一个标题的话，我们则必须在该组件的props列表上面对其进行声明，那这里的话我们就需要用到props选项：

<!-- BlogPost.vue -->
<script>
  export default {
    props: ['title']
  }
</script>

<template>
	<h4>This is {{ title }}</h4>
</template>

当一个这样的数值被传递给prop的时候，他就会成为当前这个组件实例上面的一个属性，这个属性的值就可以像是其他的组件的属性一样，在当前模板和组件的this上下文当中进行访问。

当一个prop被注册之后，我们就可以像是这样以自定义attribute的形式将参数传递给他：

<BlogPost title="My journey with Vue" />
<BlogPost title="Blogging with Vue" />
<BlogPost title="Why Vue is so fun" />

在实际应用中，我们可能在父组件中会有如下的一个博客文章数组：

js

export default {
  // ...
  data() {
    return {
      posts: [
        { id: 1, title: 'My journey with Vue' },
        { id: 2, title: 'Blogging with Vue' },
        { id: 3, title: 'Why Vue is so fun' }
      ]
    }
  }
}

这种情况下，我们可以使用 v-for 来渲染它们：

template

<BlogPost
  v-for="post in posts"
  :key="post.id"
  :title="post.title"
 />

在本人的项目应用中，为了兼容Element plus的列对其操作，我们还可以使用如下的方案：

<el-row gutter="20">
  <div v-for"item in houseLists">
    <el-col :span="8"><HouseCard :houseTilte="itme.houseTitle" /></el-col>
  </div>
</el-row>