Vue 第4天

組件的切換

<component is=""></component> 寫死
<component :is=""></component> 可以動態(tài)改變

組件的通信

1. 父--》子 （通過屬性）
   1.1 在子組件中聲明props，是個數(shù)組，在數(shù)組中聲明用來接收數(shù)據(jù)的屬性的名稱
   1.2 在父組件中使用子組件的時候，通過在子組件標簽中添加 之前聲明好的屬性，給屬性賦值類向子組件傳遞數(shù)據(jù)
   1.3 在子組件內(nèi)，就可以像使用正常數(shù)據(jù)一樣使用通過props聲明從來的數(shù)據(jù)

   這個數(shù)據(jù)傳遞過來之后，是單向綁定的，父組件中發(fā)生改變，子組件會相應的改變，但是子組件中不允許改變這個數(shù)據(jù)，就算能改變，父組件中也不會受到影響！

2. 子--》父 （通過事件）
   本質(zhì)： 其實就間接的在子組件中調(diào)用父組件的方法
   1.1 在父組件中聲明方法
   1.2 在父組件使用子組件的時候，通過事件綁定，將這個方法綁定給子組件 @
   1.3 在子組件中，如果想要和父組件通信，只需要觸發(fā)之前注冊好的事件即可(this.$emit)

   注意： $emit在觸發(fā)事件的時候，是可以傳遞參數(shù)的，這個參數(shù)可以直接在父組件中的函數(shù)的形參中接收，但是要注意，只能接收一個參數(shù)，所以如果數(shù)據(jù)較多，則利用對象傳遞

3. 兄弟組件
   通過一個全局的vue對象來通信 (是vuex一個簡單實現(xiàn)！)
   原理： $on $emit

   1.1 在兄弟組件a中聲明方法，
   1.2 在全局的vue對象中，注冊事件，綁定兄弟組件a中的方法 $on
   1.3 如果兄弟組件b需要和兄弟組件a通信，那么只需要在兄弟組件b中觸發(fā)全局vue對象中的事件 $emit

ref $refs

如果在元素中加上ref屬性
1. 該元素是一個普通的dom元素
會將當前的dom元素的dom對象以ref屬性的值作為屬性名加入到當前元素所在vue實例的$refs對象中去
2. 該元素是一個組件元素
會將當前的元素的組件對象以ref屬性的值作為屬性名加入到當前元素所在vue實例的$refs對象中去

不常用！

插槽

slot

<mycomp><button></button></mycomp>

Vue.component("mycomp", {
    template: "<div> <slot></slot> </div>"
})

具名插槽

<mycomp><button slot="名字"></button></mycomp>

Vue.component("mycomp", {
    template: "<div> <slot name='名字'></slot> </div>"
})

路由

路由的基本使用

//1. 引入vue-router.js
//2. 創(chuàng)建組件構(gòu)造對象
var login = {
    template: "<h1>login</h1>s"
}
//3. 創(chuàng)建vuerouter實例 路由對象
var router = new VueRouter({
    //4. 在vuerouter對象中 指定路由規(guī)則
    routes: [
        {
            //路由路徑
            path: "/login",
            component: login
        }
    ]
})

//5. 將router和vue實例關(guān)聯(lián)起來
var vm = new Vue({
    router: router
})

//6. 在視圖中指定路由組件顯示的位置
//<router-view></router-view>

路由參數(shù)

1. 通過?傳遞
   ?key=value&key=value
   獲?。?this.$route.query
2. 通過路由規(guī)則聲明
   /login/:id
   /login/12
   獲取: this.$route.params

router-link

這個可以代替a標簽， 他會自動的將和當前頁面的地址匹配的a標簽加上 router-link-active的類樣式

<router-link to="/login"></router-link>
<router-link :to="{path: '/login'}"></router-link>
<router-link :to="{name: '路由的名字'}"></router-link>

嵌套路由

var router = new VueRouter({
    routes: [
        {
            path: "/login",
            component: login,
            children: [
                //一定要在上層路由的組件中，為下層路由匹配的組件指定顯示位置
                //router-view
                {
                    //子路由中的path不能以/開頭
                    path: "xyz",
                    component: xyz,
                }
            ]
        }
    ]
})

編程式導航（通過js代碼進行路由跳轉(zhuǎn)）

this.$router.push("/login")

watch

watch可以用來監(jiān)聽數(shù)據(jù)的變化

var vm = new Vue({
    data: {
        shuaige: "zhangzhichao",
        meinv: {
            name: "劉慧敏",
            age: 18
        }
    },
    watch: {
        shuaige(nV, oV){
            console.log("帥哥發(fā)生變化了！")
        },
        meinv: {
            handler: function(nV, oV){
                if(nV.age > 20){
                    console.log("該成親了??！")
                }
            },
            deep: true,
            immediate: true
        },
        $route: function(){
            console.log("路由變化了, 我可以針對路由的變化做一些相對的處理了?。?)
        }
    }
})