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,甚至其它的组件;

posted @ 2022-05-12 19:29  ssss-  阅读(87)  评论(0)    收藏  举报