一、props
-
使用场景:父子组件通信
-
注意:
- 父给子传递:传递的是数据。
<Demo :param='param'/>
- 子给父传递:传递的是函数,由子组件调用函数传参。
<Demo @fun='fun'/>
- 父给子传递:传递的是数据。
-
书写方式:
props:['params']
props:{name:String}
-
props:{ name:{ type:String, //类型 required:true, //必要性 default:'老王' //默认值 } }
二、自定义事件
-
使用场景:子组件给父组件通信
-
书写方式:
- 在父组件中:
<Demo @fun="test"/>
或<Demo v-on:fun="test"/>
- 在父组件中:
<Demo ref='demo'/>
+this.$refs.demo.$on('fun', function() {})
- 若想让自定义事件只能触发一次,可以使用
once
修饰符,或$once
方法。
- 在父组件中:
三、全局事件总线
-
使用场景:万能。
-
安装全局事件总线:
new Vue({ ...... beforeCreate() { Vue.prototype.$bus = this //安装全局事件总线,$bus就是当前应用的vm }, ...... })
-
使用事件总线:
-
接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身。
methods(){ demo(data){......} } ...... mounted() { this.$bus.$on('xxxx',this.demo) }
-
提供数据:
this.$bus.$emit('xxxx',数据)
-
-
最好在beforeDestroy钩子中,用$off去解绑当前组件所用到的事件。
四、pubsub-js(发布与订阅)
-
使用场景:万能 (不推荐使用,因为需要额外装插件)
-
安装pubsub:
npm i pubsub-js
-
引入:
import pubsub from 'pubsub-js'
-
接收数据:A组件想接收数据,则在A组件中订阅消息,订阅的回调留在A组件自身。
methods(){ demo(data){......} } ...... mounted() { this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息 }
-
提供数据:
pubsub.publish('xxx',数据)
-
最好在beforeDestroy钩子中,用
PubSub.unsubscribe(pid)
去取消订阅。
五、Vuex
- 使用场景:万能
- 使用方法:从0开始学习Vuex
六、slot插槽
-
使用场景:父子组件通信
-
分类:默认插槽、具名插槽、作用域插槽
-
使用方式:
-
默认插槽:
父组件中: <Category> <div>html结构1</div> </Category> 子组件中: <template> <div> <!-- 定义插槽 --> <slot>插槽默认内容...</slot> </div> </template>
-
具名插槽:
父组件中: <Category> <template slot="center"> <div>html结构1</div> </template> <template v-slot:footer> <div>html结构2</div> </template> </Category> 子组件中: <template> <div> <!-- 定义插槽 --> <slot name="center">插槽默认内容...</slot> <slot name="footer">插槽默认内容...</slot> </div> </template>
-
作用域插槽:
-
理解:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。(games数据在Category组件中,但使用数据所遍历出来的结构由App组件决定)
-
具体编码:
父组件中: <Category> <template scope="scopeData"> <!-- 生成的是ul列表 --> <ul> <li v-for="g in scopeData.games" :key="g">{{g}}</li> </ul> </template> </Category> <Category> <template slot-scope="scopeData"> <!-- 生成的是h4标题 --> <h4 v-for="g in scopeData.games" :key="g">{{g}}</h4> </template> </Category> 子组件中: <template> <div> <slot :games="games"></slot> </div> </template> <script> export default { name:'Category', props:['title'], //数据在子组件自身 data() { return { games:['红色警戒','穿越火线','劲舞团','超级玛丽'] } }, } </script>
-
-