Vue框架之組件與過濾器的使用

一、組件的使用

局部組件的使用

​ 打油詩: 1.聲子 2.掛子 3.用

var App = { tempalte:` <div class='app'></div>` }; //2.掛子 new Vue({ el:"#app", //用子 template:<App /> components:{ App } }) 

(1)父組件向子組件傳遞數據:通過Prop

1.在子組件自定義特性。props:['自定義的屬性1','自定義屬性2'] 當一個值傳遞給一個 prop 特性的時候，它就變成了那個組件實例的一個屬性,那么我們就可以像訪問data中的值一樣 2.要在父組件中導入的子組件內部 綁定自定義的屬性 <Vheader :title = '父組件中data聲明的數據屬性'/>

​ 注意:一個組件默認可以擁有任意數量的 prop，任何值都可以傳遞給任何 prop。

(2)如何從子組件傳遞數據到父組件

1.給子組件中的某個按鈕綁定原聲事件,。我們可以調用內建的 this.$emit('自定義的事件名','傳遞的數據')，來向父級組件觸發一個自定義的事件. 2.在父組件中的子組件標簽中 要綁定自定義的事件,

全局組件的使用

Vue.component('全局組件的名字',{ 跟new Vue() 實例化對象中的options是一樣，但是要注意： 不管是公共組件還是局部組件 data必須是個函數 函數一定要返回 {} }) 

  <slot> 元素作為承載分發內容的出口

二、過濾器的使用

局部過濾器

 //1.注冊局部過濾器 在組件對象中定義 filters:{ '過濾器的名字':function(value){ } } //2.使用過濾器 使用管道符 | {{price | '過濾器的名字'}}

全局過濾器

// 注冊全局的過濾器 //第一個參數是過濾器的名字，第二個參數是執行的操作 Vue.filter('reverse',function(value) { return value.split('').reverse().join(''); }); //使用跟 局部過濾器一樣

動態路由匹配

/user/1 /user/2 加載的是同一個組件

routes:[
       {
            path:'/',
            redirect:'/home'
       },
       {
            path:'/user/:xxxx',
            name:'User',
            component:User
       }
   ]

 <router-link :to = '{name:"User",params:{xxxx:"front"}}'>前端</router-link>
 <router-link :to = '{name:"User",params:{xxxx:"ios"}}'>IOS</router-link>

復用的組件 監聽路由的變化

watch: {
    '$route':(to,from)=>{
        to 要進入的頁面的路由信息對象
        from 從哪個路由信息對象中來
 }
}

 

編程式導航

this.$router.push({
 name:"Home"
})