9.4 this.$slots在render函数中的应用

第三个 参数存的就是VNODE
createElement(‘header’,header), 返回的就是VNODE
var header = this.$slots.header; //–这返回的内容就是含有=VNODE的数组
代码展示

<div id="app">
  <my-component>
    <p>锄禾日当午</p>
    <p>汗滴禾下锄</p>
    <h2 slot="header">我是标题</h2>
    <h3 slot="footer">我是文章底部</h3>
  </my-component>
</div>
------------------------------------------------
<script>
//第三个 参数存的就是VNODE.。createElement(‘header’,header), 返回的就是VNODE
Vue.component('my-component', {
  render: function(createElement){
    let header = this.$slots.header
    let main = this.$slots.default
    let footer = this.$slots.footer
    return createElement('div', [
      createElement('header', header), //--这返回的内容就是含有=VNODE的数组
      createElement('main', main),
      createElement('footer', footer)
    ])
  }
})
</script>

9.5 在render函数中使用props传递数据

代码展示

<div id="app">
  <button @click="swicthShow">点击切换美女图片</button>---{{show}}
  <my-component :show="show"></my-component>
</div>
---------------------------------------------------------------
<script>
let app = new Vue({
  el: '#app',
  data: {
    show: false
  },
  methods: {
    swicthShow: function(){
      this.show = !this.show
    }    
  },
  components: {
    'my-component': {
      props: ['show'],
      render: function(createElement){
        let imgSrc 
        if(this.show){
          imgSrc = 'https://tp.85814.com/d/file/shutu/2018-05/20150228090540904.jpg!800'
        }else{
          imgSrc = 'https://tp.85814.com/d/file/shutu/2018-05/20150228090538519.jpg!800'
        }
        return createElement('img', {
          attrs:{
            src: imgSrc
          },
          style: {
            height: '300px'
          }
        })
      }
    }
  }
})
</script>

9.6 v-­model在render函数中的使用

<div id="app">
  <!-- <my-component :name="name" @input="showName"></my-component> -->
  <my-component :name="name" v-model="name"></my-component>
  {{name}}
</div>

Vue.component('my-component', {
  props: ['name'],
  render: function(createElement){
    let self = this //指的就是当前的VUE实例
    return createElement('input', {
      domProps: {
        value: self.name
      },
      on:{
        input:function (event) {
          debugger
          var a = this;
          //此处的this指的是什么？指的就是window
          self.$emit('input',event.target.value)
        }
      }
    })
  }   
}

9.6 作用域插槽在render函数中的使用

代码展示

Vue.component('my-conponent', {
  render: function(createElement){
    return createElement('div', this.$scopedSlots.default({
      text: '我是子组件传递过来的数据',
      msg: 'scopetext'
    }))
  }
})

  <div id="app">
    <my-conponent>
      <template slot-scope="props">
        {{props.text}}
        {{props.msg}}
      </template> 
    </my-conponent>
  </div>

9.7 函数化组件的应用

使用context的转变——­

 this.text----context.props.text
this.$slots.default-----context.children

functional: true,表示该组件无状态无实例
代码展示