props

在组件内部声明prop

• child::Vue props选项
• child::Vue 单文件组件组合式api 声明形参与自定义事件

接受prop后进行访问

• 同调用内置API

实例

child::

实例

访问props

<template>
  <div>
    {{ prop.word }}
  </div>
</template>
  
<script setup lang="ts">
import { defineProps } from "vue";
let prop = defineProps(["word"]);
</script>
  
<style></style>

• 等同于$props.word

指向原始笔记的链接

传递参数给prop

• 直接作为一个属性对其进行赋值
  • 就像原生html的属性那样, 比如class等
• 不能使用v-bind进行赋值

1. 实例:

1.1. 指定props进行传参:

const app = Vue.createApp({})
 
app.component('blog-post', {
  props: ['title'],//相当于形参
  template: `<h4>{{ title }}</h4>`
})
 
app.mount('#blog-post-demo')

<div id="blog-post-demo" class="demo">
  <blog-post title="My journey with Vue"></blog-post><!--传递实参-->
  <blog-post title="Blogging with Vue"></blog-post>
  <blog-post title="Why Vue is so fun"></blog-post>
</div>

1.2. 效果演示: