याद रखने के लिए सुविधाएँ

रेंडर कार्य

Vue.component('anchored-heading', {
 render: function (createElement) {
   return createElement(
     'h' + this.level,   //  
     this.$slots.default //   
   )
 },
 props: {
   level: {
     type: Number,
     required: true
   }
 }
})

<anchored-heading :level="1">, !</anchored-heading>

<h1>, !</h1>

<h1 v-if="level === 1">
 <slot></slot>
</h1>
<h2 v-if="level === 2">
 <slot></slot>
</h2>
<h3 v-if="level === 3">
 <slot></slot>
</h3>
<h4 v-if="level === 4">
 <slot></slot>
</h4>
<h5 v-if="level === 5">
 <slot></slot>
</h5>
<h6 v-if="level === 6">
 <slot></slot>
</h6>

यह काम किस प्रकार करता है?

1. बनाने की वस्तु। यह न केवल एक HTML टैग हो सकता है, बल्कि एक घटक नाम भी हो सकता है। इस तर्क की आवश्यकता है;
2. डेटा के साथ एक वस्तु। इसमें कक्षाओं, शैलियों, घटक के इनपुट इनपुट, घटनाओं को संभालने के तरीके आदि की सूची हो सकती है। अधिक जानकारी के लिए, दस्तावेज़ देखें। वैकल्पिक तर्क;
3. बाल आभासी नोड्स। यह या तो एक स्ट्रिंग या एक सरणी हो सकता है। ऊपर दिए गए उदाहरण में, यह $ है ।

Vue.component('v-style', {
 render: function (h) {
   return h('style', this.$slots.default)
 }
})

mixins

export default  {
  name: 'TextElement',

  data () {
    return {
      elementName: 'Text',
      showEditor: false,
      editor: null
    }
  },
  
  methods: {
    initEditor () {
      this.showEditor = true
      this.editor = new Editor(this.elementName)
    }
  }
}

export default  {
  name: 'ButtonElement',

  data () {
    return {
      elementName: 'Button',
      showEditor: false,
      editor: null
    }
  },
  
  methods: {
    initEditor () {
      this.showEditor = true
      this.editor = new Editor(this.elementName)
    }
  }
}

// mixin.js
export default  {
  data () {
    return {
      showEditor: false,
      editor: null
    }
  },
  
  methods: {
    initEditor () {
      this.showEditor = true
      this.editor = new Editor(this.elementName)
    }
  }
}

// TextElement.vue
import mixin from './mixins/mixin'

export default  {
  name: 'TextElement',

  mixins: [mixin]  //  

  data () {
    return {
      elementName: 'Text',
    }
  },
}

// ButtonElement.vue
import mixin from './mixins/mixin'

export default  {
  name: 'ButtonElement',

  mixins: [mixin]

  data () {
    return {
      elementName: 'Button'
    }
  }
}

प्रदान / इंजेक्शन

यह काम किस प्रकार करता है?

// Parent.vue        
export default {
  provide: {
   device: 'is-desktop'
  }
}

// Child.vue    
export default {
  inject: ['device'],

  created () {
   console.log(this.device) // => "is-desktop"
  }
}

provide () {
 let device = {}
 Object.defineProperty(device, 'type', { enumerable: true, get: () => this.device })
 return { device }
},

data () {
 return {
   device: 'is-desktop'
 }
}

घटक मेटा

/ sections
 -- FirstScreen.vue
/ elements
 -- Text.vue
 -- Logo.vue
 -- Button.vue
 -- SocialIcons.vue

<component :is="%componentName%"/>

<script>
export default  {
  name: 'FirstScreen',

  data () {
    return {
      elements: [
        'Text',
        'Logo',
        'Button',
      ],
    }
  }
}
</script>

<template>
  <div class="first-screen">
    <component v-for="element in elements" :is="element"/>
  </div>
</template>