Vue.js 組件

1.組件的建立

vue的組件就是一個個vue文件，裏面包含3個部分：
template：html模版
style：css樣式
script：js代碼

<template>
    <!-- 只能有一個根標籤 -->
    <div>
        <p>{{msg}}</p>
    </div>
</template>

// lang表示所使用的CSS 預處理語言
// scoped表示裏面的樣式做用範圍此侷限在此組件中
<style lang="less" scoped>
    p{
        color:green
    }
</style>

<script>
export default{
    data(){
      return{
          msg:'hello wolrd'
      }
    },
    methods:{
    }
}
</script>

2.組件的引用

在父組件的script標籤中使用import引入相關組件的vue文件，並註冊到components對象中

// App.vue
<script>
import Hello from './components/Hello.vue'
export default {
    data() {
        return {
            
        }
    },
    components: {
        Hello
    }
}
</script>

以後能夠以標籤的形式在模版中使用此Hello組件

<template>
<div>
    <Hello />
</div>
</template>

組件傳值

3.props傳值

(1)在父組件中把要傳遞的數據經過屬性的形式綁定到子組件標籤上
(2)在子組件中經過props屬性接收父組件傳遞的數據（屬性名是什麼，接收的名稱就是什麼）

父組件：

<template>
<div id="app">
    <h1>App組件</h1>
    <child :msg="msg" :person="person" :list="list"></Child>
</div>
</template>

<script>
import Child from "./components/Child.vue"

export default {
  data() {
    return {
      msg:"我是父組件傳遞的值",
      person:{name:"張三丰",age:108},
      list:['蘋果','西瓜','桃子']
    }
  },
  components: {
    Child
  }
}
</script>

子組件：

<template>
  <div>
    <P>{{msg}}</P>
    <p>{{person.name}}--{{person.age}}</p>
    <ul>
      <li v-for="(item,index) in list" :key="index">{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      
    }
  },
  props:['msg','person','list']
}
</script>

props接收父組件傳遞的數據有2種語法：簡單語法和對象語法

//簡單語法
props:['msg','person','list']

//對象語法，會檢測傳遞值的數據類型
props:{
    msg:String,
    list:Array,
    person:Object
},

4.自定義事件

自定義事件能夠將父組件的某個函數暴漏給子組件，子組件能夠經過特定的方式來調用這個函數，並以傳參的形式將子組件的數據傳遞給父組件
(1)在父組件中經過v-on的形式綁定一個自定義事件到子組件標籤上，並設置自定義事件觸發時的回調
(2)子組件經過this.$emit()方法來觸發該自定義事件，並傳入相應的參數給回調函數

//父組件 
//eventName爲自定義事件的名稱
//showMsg爲mthods中定義的方法
<child @eventName="showMsg"></Child>

//子組件使用this.$emit()觸發自定義事件
this.$emit('eventName',this.content)

還能夠使用js語法來爲自組件綁定自定義事件
語法：$on('事件名稱',回調函數)

//設定子組件標籤的ref標識
<child ref="child"></Child>

//經過ref標識找到子組件，併爲其添加子定義事件
mounted(){
    this.$refs.child.$on('eventName',this.showMsg)
}

5.訂閱和發佈

經過第三方庫來進行組件通訊，例如pubsub-js，使用這個庫能夠讓任意兩個組件進行通訊
訂閱:PubSub.subscribe('事件名稱', 回調函數);
發佈:PubSub.publish('事件名稱', 傳遞的參數);

安裝pubsub-js

npm install pubsub-js -S

引入pubsub-js （訂閱和發佈的組件都須要引入

import PubSub from 'pubsub-js'

組件1添加訂閱（至關於添加事件監聽）

<script>
import PubSub from 'pubsub-js'
export default {
  data () {
    return {
      content:""
    }
  },
  mounted(){
    //在回調函數中添加訂閱
    PubSub.subscribe('eventName', (eventName,data)=> {
      //參數一是固定的，爲事件名稱
      //參數二纔是傳遞的參數
      console.log(eventName,data)
      this.handleClick(data)
    })
  },
  methods:{
    handleClick(data){
      this.content = data
    }
  }
}
</script>

組件2發佈消息（至關於觸發事件監聽）

<script>
export default {
  data () {
    return {
      content:"我是傳遞的參數"
    }
  },
  methods:{
    handleClick(){
      //發佈（觸發事件監聽）
      PubSub.publish('eventName', this.content);
    }
  }
}
</script>