Vue复习二(渲染函数)

渲染函数

render

createElement(" 定义的元素 "，{ 元素的性质 }，" 元素的内容"/[元素的内容])

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一个 HTML 标签名、组件选项对象，或者
  // resolve 了上述任何一种的一个 async 函数。必填项。
  'div',

  // {Object}
  // 一个与模板中属性对应的数据对象。可选。
  {
   
  },

  // {String | Array}
  // 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成，
  // 也可以使用字符串来生成“文本虚拟节点”。可选。
  [
    '先写一些文字',
    createElement('h1', '一则头条'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

属性

{
  // 与 `v-bind:class` 的 API 相同，
  // 接受一个字符串、对象或字符串和对象组成的数组
  'class': {
    foo: true,
    bar: false
  },
  // 与 `v-bind:style` 的 API 相同，
  // 接受一个字符串、对象，或对象组成的数组
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 普通的 HTML 特性
  attrs: {
    id: 'foo'
  },
  // 组件 prop
  props: {
    myProp: 'bar'
  },
  // DOM 属性
  domProps: {
    innerHTML: 'baz'
  },
  // 事件监听器在 `on` 属性内，
  // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
  // 需要在处理函数中手动检查 keyCode。
  on: {
    click: this.clickHandler
  },
  // 仅用于组件，用于监听原生事件，而不是组件内部使用
  // `vm.$emit` 触发的事件。
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
  // 赋值，因为 Vue 已经自动为你进行了同步。
      // 这种暂时不知道怎么写
  directives: [
    {
      name: 'my-custom-directive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
        bar: true
      }
    }
  ],
  // 作用域插槽的格式为
  // { name: props => VNode | Array<VNode> }
  scopedSlots: {
    default: props => createElement('span', props.text)
  },
  // 如果组件是其它组件的子组件，需为插槽指定名称
  slot: 'name-of-slot',
  // 其它特殊顶层属性
  key: 'myKey',
  ref: 'myRef',
  // 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
  // 那么 `$refs.myRef` 会变成一个数组。
  refInFor: true
}

小案例

父 
  <Rend1 :type="2">
            我是小白吗?
   </Rend1>

	components:{
            Rend1:()=>import('./Render1')
        },
      
子
<script>
    export default {
        name: "Render1",
        props: {
            type: Number
        },
        render(createElement, context) {
            return createElement('h' + this.type, this.$slots.default)
        }
    }
</script>

<style scoped>

</style>

子传父

父
export default {
        name: "Render1",
        methods: {
            clickMouter($event) {
                console.log($event);
            }
        },
        render(createElement, context) {
            // return createElement('h' + this.type,
            //     {
            //     style:{width:'100px',height:'100px',background:'#ccc'}
            // }, this.$slots.default)
            return createElement(Circle1, {
                        // 组件 prop
                        props: {
                            count: 3
                        },
                // 子传父接受的函数
                        nativeOn: {
                            click: this.clickMouter
                        }
                    }),
        }
    }
子
     clickMethod(){
                this.$emit('clicks')
            }

我发现好像不能传递数据, 用于监听原生事件,而不是数据传递

renderError

只在开发环境使用

就是当渲染函数报错的情况下调试用

new Vue({
  render (h) {
    throw new Error('oops')
  },
    // 其错误将会作为第二个参数传递到
  renderError (h, err) {
    return h('pre', { style: { color: 'red' }}, err.stack)
  }
}).$mount('#app')

父传子的插槽

 scopedSlots: {
    default: props => createElement('span', props.text)
  },

父传jsx的自定义插槽

   <Rend1 :types="2" @clicks="clickMethod">
            默认
            <span>默认1</span>
            <template v-slot:a>
                <h1>header</h1>
            </template>
    </Rend1>

			// 自定义插槽
  				[
          
                    this.$slots.default,
                    this.$slots.a
                ]

VNode 必须唯一

render: function (createElement) {
  var myParagraphVNode = createElement('p', 'hi')
  return createElement('div', [
    // 错误 - 重复的 VNode
    myParagraphVNode, myParagraphVNode
  ])
}

v-if v-for 在jsx中用 if/else 和 map 重写

问题

jsx 自定义指令

jsx里面调用组件的时候, nativeOn 只能触发原生的,无法拿到子组件传递的参数

过滤器

{{str|capitalize}}

 filters:{
            capitalize(val) {
                return val.split('').reverse().join('')
            }
        }

多个串联
{{str|capitalize|Uppers}}
传参数
{{str|capitalize('aaa','bbb')}}

 capitalize(val,str1,str) {
                console.log(str1, str);
     			// aaa bbb
                return val.split('').reverse().join('')
            },