vue學習高級特性(二)--$nextTick、自定義v-model

這部分來講vue的高級特性--$nextTick和自定義v-model，寫這個主要是給自己有一個大致的印象。

一、$nextTick

直接來看代碼：

<div id="demo">
<ul ref="qq">
    <li v-for="(item, index) in list" :key="index">{{item}}</li>
</ul>
<button @click="push">push</button>
</div>

new Vue({
    el:'#demo',
    data(){
        return {
            list: [0,1,2,3,4,5,6,7,8,9,10]
        }
    },
    methods:{
        push(){
            this.list.push(11);
            let ul = this.$refs.qq
            console.log('DOM未被渲染完成')
            console.log(ul.childNodes);
            // alert(this.$refs.qq)// 數據變化後，DOM不會被立刻渲染
            this.$nextTick(function(){
                console.log('DOM已經渲染完成') 
                console.log(ul.childNodes);
            })
        }
    }})

首先this.$nextTick之前，DOM還沒有被渲染出來，但是之後，DOM是完全被渲染出來的。因爲$nextTick是微元素，是異步任務，所以當上面console.log的同步任務被執行完，才執行這個異步任務的。

二、自定義v-model

先來看代碼：

子組件:

<template>
  <div>
    <!-- 列如： vue顏色的選擇 -->
    <input type="text"
      :value="text1"
      @input="$emit('change1', $event.target.value)"
    >
  </div>
  <!-- 
    1.上面的 input 使用 :value 而不是 v-model
    2.上面的 change1 和model.event1 要對應起來
    3. text1 屬性對應起來
   -->
</template>

<script>
export default {
  name: 'CustomVModel',
  model: {
    prop: 'text1',// 對應 上面input的value
    event: 'change1'
  },
  props: {
    text1: String,
    default(){
      return ''
    }
  }
}
</script>

在子組件裏面定義input標籤，然後給動態屬性value的值和派發change1事件給父組件。

父組件：

<template>
  <div>
    <p>vue 高級特性</p>
    <hr>
    <!-- 自定義 v-model ，v-model內置:bind 和 @ -->
    <p>{{ name }}</p>
    <!-- <CustomVModel v-model="name"/> -->
    <!-- 相當於 -->
    <CustomVModel :text1='name' @change1='value => name = value'/>
  </div>
</template>

<script>
import CustomVModel from './CustomVModel'
export default {
  components: {
    CustomVModel
  },
  data () {
    return {
      name: 'hansen'
    }
  }
}
</script>

父組件調用子組件，然後通過動態屬性text1給子組件賦值，然後把子組件傳來的value傳給name。

大概圖：