render函数绑定属性和事件

目录

• render函数绑定属性和事件

render函数绑定属性和事件

import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  render(h) {
    return h('div', {
      // 等价v-bind
      attrs: {
        id: 'app'
      },
      // 等价v-on
      on: {
        click(ev) {
          console.log('父组件', ev)
        }
      }
    }, ['父组件', h(HelloWorld, {
      // 指令（if指令报错）
      directives: [{
        name: "show",
        value: true
      }],
      // props未接收，则会在$attrs
      attrs: {
        attrsData: '信息'
      },
      // 必须props接收，否则$props没有
      props: {
        propsData: '数据'
      },
      on: {
        click(ev) {
          // 阻止冒泡方式
          ev.stopPropagation()
          console.log('子组件', ev)
        }
      }
    }, {})])
  }
}

<template>
  <div v-on="$listeners" v-bind="$attrs">
    子组件
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  // 默认true，父组件传入的attrs，子组件props未接收，属性值会显示在真实DOM上，为false则不显示
  inheritAttrs: false,
  props: ['propsData'],
  created() {
    // 父组件传入的attrs和props，子组件props接收，则会在$props
    console.log(this.$props)
    // 父组件传入的attrs，子组件props未接收，会在$attrs上
    console.log(this.$attrs)
    console.log(this.$listeners)
  }
}
</script>

<style scoped>
</style>