脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue传递props

vue中props值的传递详解

 更新时间：2024年04月02日 10:13:06   作者：刻刻帝的海角  
这篇文章主要介绍了vue中props值的传递，在vue中父组件要正向的向子组件传递数据或者参数，子组件接收到后根据参数的不同来进行对应的渲染，这个正向的数据传递在vue组件中就是通过props来实现的，需要的朋友可以参考下

前言

如果我们正在构建一个博客，我们可能需要一个表示博客文章的组件。我们希望所有的博客文章分享相同的视觉布局，但有不同的内容。要实现这样的效果自然必须向组件中传递数据，例如每篇文章标题和内容，这就会使用到 props。

prop值的传递

Props 是一种特别的 attributes，你可以在组件上声明注册。要传递给博客文章组件一个标题，我们必须在组件的 props 列表上声明它。这里要用到defineProps宏：

<!-- BlogPost.vue -->
<script setup>
defineProps(['title'])
</script>
<template>
  <h4>{{ title }}</h4>
</template>

defineProps是一个仅<script setup>中可用的编译宏命令，并不需要显式地导入。声明的 props 会自动暴露给模板。defineProps会返回一个对象，其中包含了可以传递给组件的所有 props：

const props = defineProps(['title'])
console.log(props.title)

如果你没有使用<script setup>，props 必须以props选项的方式声明，props 对象会作为setup()函数的第一个参数被传入：

export default {
  props: ['title'],
  setup(props) {
    console.log(props.title)
  }
}

一个组件可以有任意多的 props，默认情况下，所有 prop 都接受任意类型的值。

当一个 prop 被注册后，可以像这样以自定义 attribute 的形式传递数据给它：

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

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

const posts = ref([
  { id: 1, title: 'My journey with Vue' },
  { id: 2, title: 'Blogging with Vue' },
  { id: 3, title: 'Why Vue is so fun' }
])

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

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

留意我们是如何使用v-bind来传递动态 prop 值的。当事先不知道要渲染的确切内容时，这一点特别有用。

监听事件​

让我们继续关注我们的<BlogPost>组件。我们会发现有时候它需要与父组件进行交互。例如，要在此处实现无障碍访问的需求，将博客文章的文字能够放大，而页面的其余部分仍使用默认字号。

在父组件中，我们可以添加一个postFontSizeref来实现这个效果：

const posts = ref([
  /* ... */
])
const postFontSize = ref(1)

在模板中用它来控制所有博客文章的字体大小：

<div :style="{ fontSize: postFontSize + 'em' }">
  <BlogPost
    v-for="post in posts"
    :key="post.id"
    :title="post.title"
   />
</div>

然后，给<BlogPost>组件添加一个按钮：

<!-- BlogPost.vue, 省略了 <script> -->
<template>
  <div class="blog-post">
    <h4>{{ title }}</h4>
    <button>Enlarge text</button>
  </div>
</template>

这个按钮目前还没有做任何事情，我们想要点击这个按钮来告诉父组件它应该放大所有博客文章的文字。要解决这个问题，组件实例提供了一个自定义事件系统。父组件可以通过v-on或@来选择性地监听子组件上抛的事件，就像监听原生 DOM 事件那样：

<BlogPost
  ...
  @enlarge-text="postFontSize += 0.1"
 />

子组件可以通过调用内置的$emit方法，通过传入事件名称来抛出一个事件

<!-- BlogPost.vue, 省略了 <script> -->
<template>
  <div class="blog-post">
    <h4>{{ title }}</h4>
    <button @click="$emit('enlarge-text')">Enlarge text</button>
  </div>
</template>

因为有了@enlarge-text="postFontSize += 0.1"的监听，父组件会接收这一事件，从而更新postFontSize的值。

我们可以通过defineEmits宏来声明需要抛出的事件：

<!-- BlogPost.vue -->
<script setup>
defineProps(['title'])
defineEmits(['enlarge-text'])
</script>

这声明了一个组件可能触发的所有事件，还可以对事件的参数进行验证。同时，这还可以让 Vue 避免将它们作为原生事件监听器隐式地应用于子组件的根元素。

和defineProps类似，defineEmits仅可用于<script setup>之中，并且不需要导入，它返回一个等同于$emit方法的emit函数。它可以被用于在组件的<script setup>中抛出事件，因为此处无法直接访问$emit：

<script setup>
const emit = defineEmits(['enlarge-text'])
emit('enlarge-text')
</script>

如果你没有在使用<script setup>，你可以通过emits选项定义组件会抛出的事件。你可以从setup()函数的第二个参数，即 setup 上下文对象上访问到emit函数：

export default {
  emits: ['enlarge-text'],
  setup(props, ctx) {
    ctx.emit('enlarge-text')
  }
}

以上就是vue中prop值的传递详解的详细内容，更多关于vue传递props的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • Vue实现数据请求拦截

    Vue实现数据请求拦截

    这篇文章主要为大家详细介绍了Vue实现数据请求拦截，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-10-10
  • Vue中的vue-resource示例详解

    Vue中的vue-resource示例详解

    Vue与后台Api进行交互通常是利用vue-resource来实现的，本质上vue-resource是通过http来完成AJAX请求相应的。这篇文章主要介绍了Vue中的vue-resource示例详解,需要的朋友可以参考下
    2018-11-11
  • VUE简单的定时器实时刷新的实现方法

    VUE简单的定时器实时刷新的实现方法

    这篇文章主要介绍了VUE简单的定时器实时刷新的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • vue实现商品购物车全选反选

    vue实现商品购物车全选反选

    这篇文章主要为大家详细介绍了vue实现商品购物车全选反选，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • VUE入门学习之事件处理

    VUE入门学习之事件处理

    这篇文章主要介绍了vue事件处理原理及过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2021-10-10
  • 浅析vue给不同环境配置不同打包命令

    浅析vue给不同环境配置不同打包命令

    本文分步骤给大家介绍vue给不同环境配置不同打包命令的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-08-08
  • 用Vue.extend构建消息提示组件的方法实例

    用Vue.extend构建消息提示组件的方法实例

    本篇文章主要介绍了用Vue.extend构建消息提示组件的方法实例，具有一定的参考价值，有兴趣的可以了解一下
    2017-08-08
  • vue项目中使用Svg的方法

    vue项目中使用Svg的方法

    本文主要以 vue-cli3 搭建的项目为例，来聊一下如何在项目中更优雅的使用 svg 。感兴趣的朋友跟随小编一起看看吧
    2018-10-10
  • 安装@vue/cli 报错npm WARN deprecated request@2.88.2问题

    安装@vue/cli 报错npm WARN deprecated request

    这篇文章主要介绍了安装@vue/cli 报错npm WARN deprecated request@2.88.2问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-03-03
  • VUE中template的三种写法

    VUE中template的三种写法

    这篇文章介绍了VUE中template的三种写法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-04-04

最新评论