---
description: 父组件将参数传递给子组件
---

# 父传子

{% hint style="info" %}
父组件
{% endhint %}

```
// 父组件
<templete>
    <div>
        <input v-model="text"/>
        <child :text="text"></child>
    </div>
</templete>
<script>
    import child from './child'
    export default {
        components: {
            child
        },
        data() {
            return {
                text: ''
            }
        }
    }
</script>
```

{% hint style="info" %}
子组件
{% endhint %}

```
// 子组件
<templete>
    <div>
        我是父组件传来的值 {{text}}
    </div>
</templete>
<script>
    export default {
        props: {
            text: {
                type: String,
                default: ''
            }
        }
    }
</script>
```
