# Vue.js 小撇步
###### tags: `Vue`

## 子組建 ref

子組件
<template>
    <el-input v-model="account" ref="account"></el-input>
</template> 

父組件
<template>
    <dialog-login ref="child" :dialogLoginShow.sync="dialogLoginShow"></dialog-login>
</template>

this.$nextTick(() => {
    this.$refs.child.$refs.account.focus();
});

# 2019/04/09
## delimiters
原本的 {{ }} 全部改成自定義 ${ }
JS:

Vue.config.delimiters = ['${', '}'];

or

var vm = new Vue({
  el: '#app',
  delimiters: ['${', '}']
});

HTML:

<div id="app">
    my name is ${name}
</div>

# 2019/03/29
## $nextTick使用
$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调

_this.$nextTick(function() {
        var y =
          document.getElementsByClassName("app-message-chats")[0].scrollHeight -
          document.getElementsByClassName("app-message-chats")[0].clientHeight;
        document.getElementsByClassName("app-message-chats")[0].scrollTop = y;
      });

# 2019/03/22
## debounce使用

checkinput: _.debounce(function() {
      this.$validator.validate().then(result => {
        if (!result) {
          this.all_complete = false;
          return false;
        }
        this.all_complete = true;
      });
    }, 1000),

# 2018/11/15
## 子父組件的溝通方式
子組件觸發一個自定義事件

this.emit('eventYouDefined', arg);

在父組件監聽

<Son  v-on:eventYouDefined="functionYours" />

## 如果子組建沒有辦法觸發事件的話 使用ref屬性的方式，直接通過vm.$refs.[子组件的ref].[子组件的属性]去拿資料
父組件

<son ref='son'></son>

this.text = this.$refs.son.text

---

## 子父組件資料同步 使用vue的sync語法糖
父組件

<comp :foo.sync="bar"></comp>  改寫成==>  <comp :foo="bar" @update:foo="val => bar = val"></comp> 

子組件

this.$emit("update:foo", newValue)

## ！！！！注意 如果props是（數組類型的）會有同步的效果，原因他本來就是引用同一個數據，千萬部要這樣做，雖然vue不會報錯，會讓數據不好分析！！！！

# 2018/10/25
## view沒有改變的時候，很多原因是vue沒偵測到資料的改變
## checkbox全選功能（compute應用）

<template>
    <input v-model="selectAll" class="selectable-all" type="checkbox"><label></label>
    <tbody v-for="list in bonus_list">
        <input v-model="selectData" :value="list" class="selectable-item" type="checkbox"><label></label>
    </tbody>
</template>

export default {
data():
 return {
    selectData: [],
    withdrawal_list: ['checkbox_1', 'checkbox_2', 'checkbox_3']
  },
computed: {
    selectAll: {
      get() {
        return this.withdrawal_list ? this.withdrawal_list.length === this.selectData.length : false;
      },
      set(value) {
        let temp = [];
        if (value) {
          temp = this.withdrawal_list.slice();
        }
        this.selectData = temp;
      }
    }
  }
}

# 2018/10/08
## .vue檔如果沒有vue實例出el="app"的話會發生這個狀況

<div v-if='true'>

</div>
<div v-else>
    <nav-notify></nav-notify>    //還是會被執行
    <nav-notify v-if="false"></nav-notify>   //才不會執行
</div>

export default {
  components: {
    navNotify
  },
}

## v-if 與 v-for 優先執行順序
這兩個在同一行的時候，v-for為優先執行再去執行v-if，所以盡量v-if優先之後再v-for，不要寫在一起

## <template/> 使用data該注意的事
使用在template上的資料，如果一開始就有資料要做判斷，但是資料是透過ajax後才有的，這樣會有錯誤，必須先指定default值亦或是加個條件判斷來修正

## export給其他js使用

exports.sayHelloInEnglish = function(){
    return "HELLO";
};

exports.sayHelloInSpanish = function(){
    return "Hola";
};

exports 與 modul.exports 一樣

## CMS模式：

如果有import的話 必須要使用
export default = {

}

## 其他的檔案匯入模組：

import ES6的方式
required ES5模式

## 資料綁定如果沒有更新：
儘量使用$set的方式去加入資料

$set(object, key, value)

$set(array,index,value)

一次要新增多筆資料：

Object.assign()

array 使用： push()、pop()、shift()、unshift()、splice()、sort()、reverse()

## 子組件 props 設定

props: {
    class_style: { 
        type: String,   //Number,Function,Object
        required: true,
        default: "123"
    }
  },

## dropify 照片沒有bind

//處理dropify預設照片問題
      setTimeout(function() {
        $(".dropify").each(function() {
          var drEvent = $(this).dropify();
          var uri = $(this).attr("data-default-file");

          drEvent = drEvent.data("dropify");
          drEvent.resetPreview();
          drEvent.clearElement();
          if (uri != null) {
            drEvent.setPreview(true, uri);
          }
        });
      }, 10);