Read more articles in the series at myMaking a blog, please visit the sample codeHere,.

You can run devServer with NPM Start and see the results at http://localhost:8080/

Register the Vue component

Example code: /lesson15/ SRC /cmp1.js

Vue.com Ponent allows you to register a component and export it to the entry vm.js.

import Vue from 'vue/dist/vue.esm'; // Register a component with Vue.componentexport default Vue.component('cmp1', {
  props: ['name'.'age'.'list'], // specifies the props to be passed in. In Vue, only props that are defined can be received by componentsdata(){// The data of a component must be a function in order to ensure that the data of the component is scoped independentlyreturn{a: 77, b: 55}; }, / / component template template: ` < div > name: {{name}} < br / > age: {{age}} < br / > < ul > < li v - for ="item in list">{{item}}</li>
  </ul>
</div>
`
});
Copy the code

Using the component

Example code: /lesson15/ SRC /vm.js

You can use components directly with <cmp1 name=”Lee Chen” age=”18″ :list=”[1, 2, 3]” />, so that the components will be rendered directly in the page in either case.

<component :is=”type” name=”Lee Chen” age=”18″ :list=”[1, 2, 3]” /> <component :is=”type” name=”Lee Chen” age=”18″ :list=”[1, 2, 3]” /> <component :is=”type” name=”Lee Chen” age=”18″ :list=”[1, 2, 3]” />

import Vue from 'vue/dist/vue.esm';
import Cmp1 from './cmp1';

let vm=new Vue({
  el: '#div1',
  data: {
    type: 'cmp1'}, // Partial components // Components can be imported either directly or through a generic Component, rendering the component when the is property is a specific component name. Template: '<div> can try cmp1 or my-dialog <inputtype="text" v-model="type" />
  <cmp1 name="Lee Chen" age="18" :list="[1, 2, 3]." " />
  <component :is="type" name="Lee Chen" age="18" :list="[1, 2, 3]." " />
</div>
`
})
Copy the code

Instantiating a component

Components can also be instantiated with the new keyword, and the instantiated components are primarily used for testing.

// Instantiate the component, mainly for testinglet cmp=new Cmp1({
  propsData: {
    name: 'Joe', list: [88, 99, 27] } }); // Generate virtual VM objectslet vm=cmp.$mount(a); // vm.$elThe DOM is stored in, but not rendered in, the page console.log(VM).$el); // Test the codeif(vm.$el.querySelector('li').innerHTML=='88'){
  console.log('right');
}else{
  console.log('failure');
}
Copy the code

Component slot

We can tag a default slot location in the template with <slot /> and a named slot location with <slot name=”title”/>.

When using a component, the contents inside the component tag <my-dialog></my-dialog> are slot contents. The content with the appropriate name attribute is inserted into the slot where <slot name=”title”/> is located, and the rest is inserted into the default slot.

Example code: /lesson15/ SRC /my-dialog.js

import Vue from 'vue/dist/vue.esm';
import 'bootstrap/dist/css/bootstrap.css';
import './css/my-dialog.css';

export default Vue.component('my-dialog', {
  data() {return {};
  },
  template: `
<div class="panel panel-default my-dialog">
  <div class="panel-heading">
    <slot name="title"/>
  </div>
  <div class="panel-body">
    <slot />
  </div>
</div>
`
});
Copy the code

Example code: /lesson15/ SRC /vm.js

import Vue from 'vue/dist/vue.esm';
import Cmp1 from './cmp1';
import MyDialog from './my-dialog';

let vm=new Vue({
  el: '#div1',
  data: {
    type: 'cmp1'}, // Partial components // Components can be imported either directly or through a generic Component, rendering the component when the is property is a specific component name. Template: '<div> can try cmp1 or my-dialog <inputtype="text" v-model="type" />
  <cmp1 name="Lee Chen" age="18" :list="[1, 2, 3]." " />
  <component :is="type" name="Lee Chen" age="18" :list="[1, 2, 3]." "/> <my-dialog> <! -- slot content named title --> <template slot="title"</template> Some text text <! - the default content of the slot - > < ul > < li > asdfas < / li > < li > asdfas < / li > < / ul > < / my - dialog > < / div > `})Copy the code