vue you may not frequently used knowledge

vue common component of the introduction of require.context

1. Scene: a plurality of components such as the page to be imported, the original wording:

import test from '@/components/test'
import test1 from '@/components/test1'
import test2 from '@/components/test2'
components:{test,test1,test2}

2. This will write a lot of duplicate code can be written using the require.context

  In the main.js

  const path = require('path')

  const files = require.context('./components', false, /\.vue$/)

  const modules = {}

  files.keys().forEach(key => {

    const name = path.basename(key, '.vue')

    console.log (name, 'component name')

    modules[name] = files(key).default || files(key)

    console.log(modules, '值')

    Vue.component(name, files(key).default || files(key))

 })

Directly in the page needed

<template>

  <div>

　　<test></test>

  </div>

<template>

2, the listener handlermethod and immediateproperties

Listener handlermethod and immediateproperties

var vm = new Vue({

  el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { console.log('第一次没有执行') this.fullName = val + '·' + this.lastName } } })

 

 When initialization

firstName函数并没有执行

fullName并没有值

If you want to firstName on the implementation of the first time is bound:

watch: {
  firstName: {
    handler(val){
      console.log('第一次执行了')
      this.fullName = val + '·' + this.lastName }, immediate:true//在watch中声明后立即执行handler } }

 

 Watch carefully:

fullName 现在是有值

3.4listeners

2.4.0 The two new properties are not common, but advanced usage is very common; 1. attrs obtaining sub-value pass a parent is not defined in the props

// 父组件
<home title="这是标题" width="80" height="80" imgUrl="imgUrl"/> // 子组件 mounted() { console.log(this.$attrs) //{title: "这是标题", width: "80", height: "80", imgUrl: "imgUrl"} }, 复制代码

If the sub-assembly corresponding to the defined value props, printing attributes is defined culling

props: {
  width: {
    type: String,
    default: ''
  }
},
mounted() { console.log(this.$attrs) //{title: "这是标题", height: "80", imgUrl: "imgUrl"} }, 复制代码

2. in the Listeners "Incoming internal components - very useful when creating a higher level of component

// 父组件
<home @change="change"/>

// 子组件
mounted() {
  console.log(this.$listeners) //即可拿到 change 事件 } 复制代码

If the Sun is the parent component of the component to access properties and call methods, it can direct a pass on a

3.inheritAttrs

// 父组件
<home title="这是标题" width="80" height="80" imgUrl="imgUrl"/> // 子组件 mounted() { console.log(this.$attrs) //{title: "这是标题", width: "80", height: "80", imgUrl: "imgUrl"} }, inheritAttrs默认值为 true,也就是父组件上的属性会显示到根组件上 如果设置为 false 就会隐藏

Author: Fire wolf 1
link: https: //juejin.im/post/5d9d386fe51d45784d3f8637
Source: Nuggets
copyright reserved by the authors. Commercial reprint please contact the author authorized, non-commercial reprint please indicate the source.