元件的使用傳參

1、在src目錄下建立一個components資料夾。 在其中建立一個 vue檔案。

2、註冊使用

註冊：

在script中import name from ''./路徑"

使用

<common-header> </common-header>

2、第二種方法：全域性引入使用（全域性註冊後，其他地方都可以直接使用元件）

1.main.js中註冊
import BsBtn from '@/components/BsBtn.vue';   //匯入
Vue.component('BsBtn',BsBtn)   //註冊

2.使用
<template>
    <div>
       mv
       
 
<bs-btn></bs-btn>    //使用按鈕元件
    </div>
</template>
<script>
  import BsBtn from '@/components/BsBtn.vue'
  export default{
    name:"Music",
    components:{    //註冊
      BsBtn
    }
</script>    //第二次使用則不需要寫匯入和註冊

3、元件中的傳參

• 父元素向子元素元件傳值。父元件傳遞給子元件時，使用自定義屬性傳參 。

1. 給子元件定義一個data屬性，接收父元件傳遞過來的引數
 
//App.vue
<MovieItem data="item" v-for="item of movies" :key="item.id"></MovieItem>
2.在子元件的props 屬性中接收
//item.vue
  <script>
  export default {
   name:"MovieItem"
   porps:{
    data:{
      type:Object
        }
   }
}
</script>
 使用資料
//item.vue
<template>
    <div>
        <img :src="data.images.small" alt="">
        <p>{{data.title}}</p>
    </div>
</template>

• 子元件向父元件傳值

//1.使用$emit方式自定義事件，向父元件傳參
<button @click="handleDelete(index)">刪除</button>
<script>
export default {
  ...
  methods:{
    handleDelete(index){
      this.$emit("deleteItem",index)
    }
  }
};
</script>
//2.父元件接收子元件傳遞過來的事件引數
<home-table :data="arr" @deleteItem="handleDelete"></home-table>
<script>
import HomeTable from './components/HomeTable'
export default {
  name: 'app',
  ...
  methods:{
   
    handleDelete(index){
      console.log(index) //接收過來並列印。
    }
  }
}
</script>

第二種元件：動態元件

 動態元件
lishuge
Vue

//1.定義元件
//2.引入元件和data關聯
<template>
  <div>
    <button @click="handleToggle">toggle</button>   //2.切換 元件
    <component :is="isToggle?one:two"></component>  //1.三元判斷顯示那個元件 
  </div>
</template>

<script>
import One from "../components/One.vue";
import Two from '../components/Two.vue'
export default {
  data() {                         ---
    return {                         |
      isToggle:false,                |
      one: "One",                    |
      two:"Two"                      |
    };                               | 關聯動態元件
  },                                 |
  components: {                      |
    One,                             |
    Two                              |
  },                               ---
  methods:{
      handleToggle(){
          this.isToggle = !this.isToggle
      }
  }
};
</script

第三種方式：keep-alive（此元件具有路由功能）

keep-alive 包裹路由-元件。快取元件。之後元件不會被銷燬。元件對應的幾個生命週期函式不會重新觸發。

<keep-alive>
      <router-view />
</keep-alive>
3-1、當元件在<keep-alive>內被切換，他的activated和deactivated 這兩個生命週期鉤子函式將會     被對應執行
3-2、解決mounted生命週期不執行的問題
第一種：在路由新增屬性exclude="detail"(引號裡面是要執行週期的路由name)
1.exclude Tips:一定要給元件name屬性與其一致
export default {
  name: "Detail",
  data() {
    return {
      imgUrl: ""
    };
  },
  mounted() {
    ...
  }
};
</script>
2.配置keep-alive  //App.vue
<keep-alive exclude="Detail">
      <router-view />
</keep-alive>
第二種：在周期函式activated()請求資料
 activated(){
         var id=this.$route.params.id;
         var url="http://192.168.14.49:5000/playlist/detail?id="+id;
         this.axios.get(url).then(res=>{
             console.log(res)
             console.log(res.data.playlist.coverImgUrl);
             this.imgUrl=res.data.playlist.coverImgUrl;
             })
         }
注意：
exclude Tips:一定要給元件name屬性與其一致

路由的使用以及傳參 跳轉

路由的配置詳解

例子：router-link 路由導航

router-view 主要是在構建單頁應用時，方便渲染指定路由對應的元件，渲染的元件是由vue-router指定的。
router-link 元件支援使用者在具有路由功能的應用中 (點選) 導航。 通過 to 屬性指定目標地址，預設渲染成帶有正確連結的<a>標籤，可以通過配置 tag 屬性生成別的標籤.。另外，當目標路由成功啟用時，連結元素自動設定一個表示啟用的 CSS 類名。

 1.定義路由並掛載根例項
// 0. 如果使用模組化機制程式設計，匯入Vue和VueRouter，要呼叫 Vue.use(VueRouter)

// 1. 定義 (路由) 元件。
// 可以從其他檔案 import 進來
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定義路由
// 每個路由應該對映一個元件。 其中"component" 可以是
// 通過 Vue.extend() 建立的元件構造器，
// 或者，只是一個元件配置物件。
// 我們晚點再討論巢狀路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 建立 router 例項，然後傳 `routes` 配置
// 你還可以傳別的配置引數, 不過先這麼簡單著吧。
const router = new VueRouter({
  routes // (縮寫) 相當於 routes: routes
})

// 4. 建立和掛載根例項。
// 記得要通過 router 配置引數注入路由，
// 從而讓整個應用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 現在，應用已經啟動了！
--------------------------------------------------------------------------------
2.router-link和router-view
 
// router-link來導航，然後router-view顯示路由匹配到的元件。
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 元件來導航. -->
    <!-- 通過傳入 `to` 屬性指定連結. -->
    <!-- <router-link> 預設會被渲染成一個 `<a>` 標籤 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的元件將渲染在這裡 -->
  <router-view></router-view>
</div>
--------------------------------------------------------------------------------

3.this.$router
通過注入路由器，我們可以在任何元件內通過 this.$router 訪問路由器，也可以通過 this.$route 訪問當前路由：
// Home.vue
export default {
  computed: {
    username() {
      // 我們很快就會看到 `params` 是什麼
      return this.$route.params.username
    }
  },
  methods: {
    goBack() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
    }//goback 方法，當訪問的頁面大於1的時候 回退到上一個頁面，否則跳轉到/
  }
}
該文件通篇都常使用 router 例項。留意一下 this.$router 和 router 使用起來完全一樣。我們使用 this.$router 的原因是我們並不想在每個獨立需要封裝路由的元件中都匯入路由。

1、路由的兩類寫法 常見的和動態路由

• 常見的路由以及子路由的配置
• 動態路由的配置
• 以及路由重定向

//常見的路由書寫
//第一步：引用vue和vue-router ，Vue.use（VueRouter） 
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

//第二步：引用定義好的路由元件
import Films from '../views/Films.vue'

//第三步：定義路由（路由物件包含路由名、路徑、元件、引數、子路由等），每一個路由對映到一個元件

//第四步：通過new Router來建立router例項
export default new Router({
const routes = [
{
 path: '/films',
  name: 'films',
  component: Films,  //到此為止為第一種路由寫法
 children:[
     {
      path:'nowPlaying',
      component:()=>('../views/NowPlaying.vue')
     },
     {
      path:'ComingSoon',
      component:()=>('../views/ComingSoon.vue')
     },
   ],  //以上為子路由的寫法
}
{      //此往下為第二種路由的寫法 不用import引入元件
path:'./film',
name:'film',
component:()=>import('../views/Film.vue')
}, 　　 //以下是重定向
{
path:'/',
redirect:"films/nowPlaying"
}
]
//此往下第二類動態路由的寫法
{
 path: '/test',
 name: 'test',       //命令路由
 component: () => import('../views/test.vue'),
 props:true //接收傳參
 }    

2、路由跳轉的傳參和接收引數

2-1. router-link

跳轉傳參：
<router-link :to="{name:'detail',query:{id:1213}}">detail</router-link>
接收：
console.log(this.$route.query.id)

2-2. 動態路由中router-link

//配置動態路由 router/index.js
{
    path: '/detail/:id',
    /* 命名路由 */
    name: 'detail',
    component: () => import('../views/Detail.vue')
    props:true
  }
      傳：
 <router-link :to="{name:'detail',params:{id:1213}}">detail</router-link>
      接：
   mounted(){
        console.log(this.$route.params.id)
    }

2-3. 事件跳轉傳參

一、在列表傳值this.$router.push()

<div @click="handleClick(data.id)"></div>

export default {
 name:"Item",
 props:{
 data:{
 type:Object,
 required:true
 }
 },
 methods:{
 handleClick(id){
 console.log(id)
 this.$router.push(`/detail?id=${id}`)
 }
 }
};

二、在詳情頁接收傳值this.$route.query

export default {
 name:"Detail",
 computed:{
 id(){
 return this.$route.query.id
 }
 }
};

2-4. props解耦id對動態路由 和push()接收傳參有效

//配置路由
{
    path: '/detail/:id',
    /* 命名路由 */
    name:'detail',
    component:() => import('../views/Detail.vue'),
    //core code
    props:true
  }

//Detail.vue
export default {
    props:['id'],
    mounted(){
        console.log(this.id)
    }
};