vue中传递数据
父组件传递子组件数据
- 方式:通过props属性来传递数据
- 注意:属性的值必须在组件中通过props属性显示指定,否则,不会生效
- 说明:传递过来的props属性的用法与data属性的用法相同
- 如果传递的数据是data中的属性时,必须使用v-bind绑定属性才可以传递过去
子组件传递父组件数据
- 方式:父组件给子组件传递一个函数,由子组件调用这个函数
- 说明:借助vue中的自定义事件(v-on:cunstomFn="fn")
- $emit():触发事件
非父子组件传递数据
- 可以使用一个空的 Vue 实例作为事件总线bus
- A组件传递B组件数据 1.B先通过bus.$on绑定事件,2.A通过bus.$emit方法调用B绑定的事件方法
- $on和$emit都是bus调用的
组件中插槽使用
有时在使用组件的时候希望往组件中加入其它内容,在组件中通过插槽<slot></slot>来接收内容。插槽内可以包含任何模板代码,包括 HTML,甚至其它的组件;