vue高级特性

v-model

<template>
    <div>
        <div>{{ name }}</div>
        <Child v-model="name"/>
    </div>
</template>
<script>
  import Child from './child'
  export default{
      components:{
          Child
      },
      data(){
          return {
              name: '123'
          }
      }
  }
</script>

<template>
  <input type="text" :value="name" @input="$emit('changName', $event.target.value)">
</template>
<script>
export default {
  name: 'child',
  model:{
    prop: 'name',
    event: 'changName'
  },
  props:{
    name: String,
    default(){
      return ''
    }
  }
}
</script>

$nextTick

汇总data的修改，一次性做视图更新
减少DOM操作次数，提高性能

<template>
    <div>
        <ul ref="ul">
            <li v-for="(item, index) in liList" :key="index">{{item}}</li>
        </ul>
        <button @click="addList">++++</button>
    </div>
</template>
<script>
  export default{
      data(){
          return {
              liList: [1,2,3]
          }
      },
      methods:{
          addList(){
              this.liList.push('4')
              this.liList.push('5')
              this.liList.push('6')
              this.$nextTick(() => {
                //由于页面是异步渲染的 数据改变 dom节点没有渲染 使用$nextTick页面渲染后回调
                const ulElm = this.$refs.ul
                console.log('子元素个数', ulElm.childNodes.length)
              })
          }
      }
  }
</script>

slot

父组件要往子组件插入内容

• 基本使用

<template>
    <Child>
        {{params.title}}
    </Child>
</template>
<script>
  import Child from './child'
  export default{
      components:{Child},
      data(){
          return {
              params:{
                  title:'我是你爸爸'
              }
          }
      }
  }
</script>

<template>
  <span>
    <slot>默认内容，会被覆盖</slot>
  </span>
</template>
<script>
export default {
  name: 'child',
}
</script>

• 作用域插槽

<template>
    <Child>
        <template v-slot="slotProps">
            {{slotProps.slotData}}
        </template>
    </Child>
</template>
<script>
  import Child from './child'
  export default{
      components:{Child},
  }
</script>

<template>
  <span>
    <slot :slotData="slotMsg">{{slotMsg}}</slot>
  </span>
</template>
<script>
export default {
  name: 'child',
  data(){
    return {
      slotMsg: '我是来自子组件的内容'
    }
  }
}
</script>

• 具名插槽

动态、异步组件

<template>
  <component :is="child"/>
</template>
<script>
export default {
  name: 'child',
  component:{
    child:()=> import('./child')
  },
  data(){，
    return {
      slotMsg: '我是来自子组件的内容'
    }
  }
}
</script>

keep-alive

mixin

• 变量来源不明确，不利于代码阅读
• 多mixin可能就造成命名冲突
• mixin和组件可能行成多对多的关系，复杂度高

<template>
    <button @click="showCity">{{province}}{{city}}</button>
</template>
<script>
import mixin from './mixin'
export default {
    mixins:[mixin],
    data(){
        return {
            province: '浙江省'
        }
    },
    methods:{
    },
    mounted(){
        console.log('这里是XXX')
    }
}
</script>

<script>
export default {
    data(){
        return {
            city: '北京'
        }
    },
    methods:{
        showCity(){
            console.log(this.city)
        }
    },
    mounted(){
        console.log('这是mixin')
    }
}
</script>