vue.js 學習筆記

父組件傳遞數據給子組件

父組件

<ratingselect :only-content='onlyContent' :desc='desc'></ratingselect>

子組件

props: {       
       onlyContent: {
         type: Boolean,
         default: false
       },
       desc: {
         type: Object,
         default(){
           return {
             all: '所有',
             positive: '滿意',
             negative: '不滿意'
           };
         }
       }
     }

父組件經過添加屬性的方式向子組件傳遞數據，若是屬性名是駝峯命名例如onlyContent,要轉換成only-content,子組件經過props接收父組件傳過來的數據，而且能夠經過type制定數據類型，default定義默認數據

子組件傳遞數據給父組件

子組件

this.$emit('show-content',this.isOnlyContent);

父組件

<ratings v-on:show-content="ratingTypeSelect"></ratings>
  
  methods:{
        isShowContent(isOnlyContent){
          this.onlyContent = isOnlyContent
          this.$nextTick(function () {
            this.foodScroll.refresh();
          })
        }
  }

子組件經過$emit觸發父組件調用子組件監聽的的show-content事件執行的ratingTypeSelect的方法，而且傳入this.isOnlyContent爲參數。

$nextTick回調函數

isShowContent(isOnlyContent){
            this.onlyContent = isOnlyContent
            this.$nextTick(function () {
              this.foodScroll.refresh();
            })
    }

$nextTick是在修改數據，而且dom更新完畢後在執行的一個回調，例如我上面的代碼，更改了onlyContent，更改完成後，頁面的dom元素會根據更改後的值作出相應的變化，等dom渲染完畢，在執行refresh方法

指令keep-alive

<keep-alive>
    <good :is='curremtView' ></good>
  </keep-alive>

若是把切換出去的組件保留在內存中，能夠保留它的狀態或避免從新渲染。爲此能夠添加一個keep-alive指令

讓css只在當前組件中起做用

<style scoped></style>

在每個vue組件中均可以定義各自的css，js，若是但願組件內寫的css只對當前組件起做用，只須要在style中寫入scoped

$refs綁定dom元素和組件

<td colspan="5" ref="total-prices">總價：{{total}}</td>

在元素或者組件中均可以用ref來綁定組件，在方法裏面直接用 this.$refs["total-prices"] 就表示引入這個dom元素或者組件。若是ref名稱爲駝峯命名或者都是小寫，例如 ref="totalPrices" 直接用this.$refs.totalPrices 來引用