刘贵学博客

夯实Vue系列 Demo 1 父子组件通讯:Props

Vue 组件通讯概述

父子组件

  • 父 -> 子:属性,即:父组件传值给子组件使用Props属性;【本文将介绍】
  • 子 -> 父,事件;子组件 传值给父组件使用Emit事件;【Demo2 介绍】

普通组件

邻居组件或兄弟组件如何传值?

两种方式
* Global Event Bus 【Demo4 会介绍】
* Vuex 【Demo6 会介绍】

Demo1 代码:

父子组件通讯:Props 实现如下:

实例代码详情可参考

https://coding.net/u/guixue/p/vue-starter/git/commit/70f792b4c0d7966c

运行结果

输入框里输入例子,子组件会收到改变的效果。

但是反过来, 子组件如果想改变 传入的属性值,浏览器会抛出 警告。

因为组件设计初衷是单向数据流,只能由父->子单向传递。