Vue组件化和路由

时间:2023-12-11 21:25:02
组件化
组件化是vue的核心思想,它能提高开发效率,方便重复使用,简化调试步骤,提升整个项目的可维护性,便于多人协同开发
组件通信
父组件 => 子组件:
属性props
特性$attrs
引用refs
Vue组件化和路由Vue组件化和路由Vue组件化和路由Vue组件化和路由
// child
props: { msg: String }
// parent
<HelloWorld msg="Welcome to Your Vue.js App"/>
Vue组件化和路由
// child:并未在props中声明foo<p>{{$attrs.foo}}</p>
// parent
<HelloWorld foo="foo"/>
Vue组件化和路由
// parent
<HelloWorld ref="hw"/>
mounted() {
this.$refs.hw.xx = 'xxx'
}
子元素$childrenVue组件化和路由
// parent
this.$children[0].xx = 'xxx'
Vue组件化和路由
子元素不保证顺序
子组件 => 父组件:自定义事件
// child
this.$emit('add', good)
// parent
<Cart @add="cartAdd($event)"></Cart>
兄弟组件:通过共同祖辈组件
通过共同的祖辈组件搭桥,$parent或$root。
// brother1
this.$parent.$on('foo', handle)
// brother2
this.$parent.$emit('foo')
祖先和后代之间
// ancestor
provide() {
return {foo: 'foo'}
}
// descendant
inject: ['foo']
由于嵌套层数过多,传递props不切实际,vue提供了 provide/inject API完成该任务provide/inject:能够实现祖先给后代传值
任意两个组件之间:事件总线 或 vuex事件总线:创建一个Bus类负责事件派发、监听和回调管理
export default class Bus{
    constructor(){
        this.callbacks = {}
    }
    $on(name, fn){
        this.callbacks[name] = this.callbacks[name] || []
        this.callbacks[name].push(fn)
    }
    $emit(name, args){
        if(this.callbacks[name]){
            this.callbacks[name].forEach(cb => cb(args))
        }
    }
}
Vue组件化和路由// main.js
Vue.prototype.$bus = new Bus()
// child1
this.$bus.$on('foo', handle)
// child2
this.$bus.$emit('foo')
Vue组件化和路由
实践中可以用Vue代替Bus,因为它已经实现了相应功能vuex:创建唯一的全局数据管理者store,通过它管理数据并通知组件状态变更
插槽
插槽语法是Vue 实现的内容分发 API,用于复合组件开发。该技术在通用组件库开发中有大量应用。匿名插槽
具名插槽
将内容分发到子组件指定位置
Vue组件化和路由
// comp1
<div>
<slot></slot>
</div>
// parent
<comp>hello</comp>
作用域插槽
分发内容要用到子组件中的数据
// comp3
<div>
<slot :foo="foo"></slot>
</div>
// parent
<Comp3>
<!-- 把v-slot的值指定为作用域上下文对象 --><template v-slot:default="slotProps">
来自子组件数据:{{slotProps.foo}}</template>
</Comp3>
Vue-router
Vue-router是vue.js官方路由管理器,它和vue.js的核心深度集成,让构建单页面变得易如反掌
安装: vue add router
核心步骤:
步骤一:使用vue-router插件,router.js
import Router from 'vue-router'
Vue.use(Router)
步骤二:创建Router实例,router.js
export default new Router({…})
步骤三:在根组件上添加该实例,main.js
import router from './router'
new Vue({
  router,
}).$mount("#app”);
步骤四:添加路由视图,App.vue
<router-view></router-view>
导航
Vue组件化和路由
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>