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的资料请关注脚本之家其它相关文章！