vue render slot

slot    内容分发  插槽内可以包含任何模板代码（html 组件）     

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

1. html 组件

Vue.component('alert-box', {
  template: `
    <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>
  `
})

Vue.component('hello', {
  template: `
    <div class="hello">
      <a>link</a>
      hello
  
    </div>
  `
})

Vue.prototype.isActiveId = 1;

var myname = 'wj'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  // router,
  // store,
  // components: { App },
  // template: '<App/>'

  // render:function(h){
  //   return h('hello')
  // }


  template:`<alert-box>
  <hello />
  <p>my power</p>
  Something bad happened.
</alert-box>`




})

View Code