vue
  • Vue基础
  • 生命周期
  • 实用技巧
  • 相关资料
  • 组件通讯
    • 父传子
    • 子传父
    • eventBus
    • Vuex
  • 路由
    • 路由配置
    • 路由使用
  • 封装组件
    • 自定义组件上使用v-model监听
    • js调用modal组件
  • 插件
    • 图表
    • vue-awesome-swiper
Powered by GitBook
On this page
  1. 组件通讯

父传子

父组件将参数传递给子组件

Previous相关资料Next子传父

Last updated 6 years ago

CtrlK

父组件

// 父组件
<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>

子组件

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