vue专栏 03.vue组件 02.组件通信 02.props-实参

全栈开发

已于 2022-04-03 12:17:06 修改

阅读量77

点赞数

分类专栏： vue 文章标签： vue.js

于 2022-03-21 19:09:41 首次发布

本文链接：https://blog.csdn.net/m0_66351881/article/details/123643330

版权

vue 专栏收录该内容

69 篇文章 2 订阅

订阅专栏

# 02.props-实参

[toc]{type: "ol", level: [3,4]}

### 组件创建
```js
// 创建子组件
const Box = {
    props: {
        brand: {type: String, required:true, default: 'Web'},
        colleges: {type: Array, required: false},
    },
    template: `#box`,
};

// 创建父组件
const app = Vue.createApp({
    data() {
        return {
            msg1: 'Web',
            msg2: ['HTML', 'CSS', 'JS'],
        }
    },
    components: {
        'app-box': Box
    }
}).mount('#app');
```
```html
<!--子组件内容-->
<template id="box">
    <div>
        <h3>{{ brand }}</h3>
        <ul>
            <li v-for="item in colleges">{{ item }}</li>
        </ul>
    </div>
</template>
```


### 传递实参
#### 动态绑定 推荐
```html
<div id="app">
    <div id="home">
        <span>首页</span>
        <app-box :brand="msg1" :colleges="msg2"></app-box>
    </div>
</div>
```
![02](imgs/02.png)

#### 混合使用 不推荐
```html
<div id="app">
    <div id="info">
        <span>消息</span>
        <app-box brand="Fruit" :colleges="['Pear', 'Apple']"></app-box>
    </div>
</div>
```
![03](imgs/03.png)

#### 解析为字符串
```html
<div id="app">
    <div id="mine">
        <span>我的</span>
        <app-box brand="Animal" colleges="['Pig', 'Dog']"></app-box>
    </div>
</div>
```
![04](imgs/04.png)