1、元件通訊

流程：

• 建立專案 vue init webpack mydemo
• 清空工作
• 建立parent資料夾-->parent.vue/child.vue
• 把child.vue引入到parent.vue中
• 把parent資料夾中的parent.vue引入到App.vue中

a.父傳子

父傳子：傳遞基本資料型別，通過繫結自定義屬性，子元件通過props接收

1. 父變子變：直接傳遞基本資料型別
2. 子變父變：直接報錯 解決方法：直接把父元件傳遞過來的值儲存為自己的變數值
3. 父變子變，子變父變： 傳遞一個物件。 由於傳遞的是物件，而物件傳遞的是地址，所以父子同時操作的是同一個地址

b.子傳父

子傳父：繫結方法$emit(方法名，引數)

c.非父子

1.首先在vue原型上定義一個屬性，用來關聯所有的vue的元件

Vue.prototype.Event = new Vue()

2.one->two 傳值

　　在one元件中繫結事件

<button @click="sendTwo">傳送給two的資料</button>
 methods:{
    sendTwo(){
        // 傳送資料$emit
        this.Event.$emit('sendTwo',this.msg)
    }
}

　　在two元件中無條件接受 （mounted）

mounted(){
    // 接收資料$on
    this.Event.$on('sendTwo',(e)=>{
        console.log(e)
    })
}

總結：

1. 父傳子：給父元件中的子元件繫結屬性，子元件通過props接收
2. 子傳父：給子元件繫結方法，通過$emit繫結方法名。在父元件中繫結約定的方法名即可.

2、is

• 解決標籤的固定搭配
• 動態元件

　　1. ul>li

　　此時給li繫結 is屬性 (<li is='vOne'></li>)，那麼此時就是把li替換為元件vOne的內容

　　2.動態元件

　　首先在data中定義一個變數(name)，給name：'vOne'

<!-- 用來展示元件內容 -->
 <div :is='name'></div>

　　效果是點選one展示one的內容，點選two展示two內容，所以此時需要兩個按鈕

<!-- 動態元件 -->
 <button @click="name='vOne'">one</button>
 <button @click="name='vTwo'">two</button>

3、slot (插槽)

1.無名插槽

<v-one>元件內容</v-one>

在子元件v-one元件中寫<slot></slot>，在元件內容的前後都可以

2.具名插槽

<v-two>
    <div slot='aa'>aa</div>
    <div slot='bb'>bb</div>
</v-two>

　　在子元件中v-two中

<slot name='aa'></slot>

4、ref

1.主要是用來獲取DOM元素

　　給元素繫結ref屬性(ref='box')，通過this.$refs.box 來獲取當前元素

2.獲取元件

給元素繫結ref屬性(ref='one')，通過this.$refs.box 來獲取當前元件，那麼此時可以使用元件中的屬性和方法

5、jquery

• 安裝 npm i jquery --save
• 在需要的頁面匯入jquery

import $ from 'jquery'

mounted(){
    獲取元素進行操作
    $('button').click(()=>{
          $('.box').fadeOut(3000)
      })
}
在<template>
    <div>
     <div class="box"></div>
    <button>點選淡出</button>
    </div>
</template>