Vue组件通信方法大全

[](()props down(父传子)

---

[](()prpos传递数据

组件实例的作用域是孤立的,父组件不能直接使用子组件的数据，子组件也不能直接使用父组件的数据

父组件在模板中使用子组件的时候可以给子组件传递数据

子组件需要通过props属性来接收后才能使用

‘bbb’:{

props:[‘money’]

}

如果父组件传递属性给子组件的时候键名有'-'，子组件接收的时候写成小驼峰的模式

我们可以用 v-bind 来动态地将 prop 绑定到父组件的数据。每当父组件的数据变化时，该变化也会传导给子组件

1)父组件给子组件传递数据的时候

子组件需要利用props属性来确定自己的预期数据

2)如果 子组件 没有通过props属性接收传递过来的数据

则数据会议自定义属性的方式,放在 子组件 最外层的根元素上

• 简单案例

这是father组件里的数据Pmsg => {{pMsg}}

这是son子组件,接收父组件传递的数据pMsg=>{{pMsg}}

• 子组件数据改变时,只会更改子组件自己的内容

• 如果是引用类型,例如数组或者对象,可以进行引用类型里的数据更改

这是father组件里的数据Pmsg => {{pMsg.msg}}

这是son子组件,接收父组件传递的数据pMsg=>{{pMsg.msg}}

[](()prpos验证

我们可以为组件的 prop 指定验证规则。

如果传入的数据不符合要求，Vue 会发出警告。这对于开发给他人使用的组件非常有用

props:{ num:填写验证规则, }

• 验证主要分为：

• 类型验证

1.基础的类型检查 (null 和 undefined 会通过任何类型验证)

num:Number

2.多个可能的类型

num:[Number,String]

• 必传验证

1.必填的字符串

num:{ type:Number, required:true }

• 默认值设置

1. 带有默认值的数字

num: { type: Number, default: 1000, }

2…带有默认值的对象, 对象或数组默认值必须从一个工厂函数获取

num: { type: Object, default: function () { return { message: 'hello' } } }

• 自定义验证

1.自定义验证函数, 这个值必须匹配下列字符串中的一个

num: { validator(value){ return ['success', 'warning', 'danger'].indexOf(value) !== -1 }

props的值可以是对象，在里面可以对父组件传过来的数据做出验证，如果验证失败，会抛出警告

如果子组件没有通过props来接收父组件传递的某个数据，该属性就会出现在子组件模板的最外层节点上面

我是father组件...

---

我是son组件...{{num}}

[](()events up(子传父)

---

每一个组件或者实例都会有自定义事件，和触发事件的能力

父组件给子组件绑定一个自定义事件，这个事件的处理程序却是父组件的一个方法

<son @change="父组件的函数"></son>

当子组件触发这个事件的时候，相当于父组件的方法被执行了 this.$emit(自定义事件，参数)

这是父组件

子组件传递的数据==>{{pMsg}}

---

<son @change=“changeMsg”>

这是子组件的数据==>{{msg}}

[](()v-model可以用在组件通信中

在组件上面使用v-model指令，相当于绑定了value属性与监听input事件。