Vue中为Kendo UI模板渲染的子组件传参及监听事件

Hey there! I’ve run into this exact scenario with Kendo UI Vue components before, so let me walk you through two solid approaches to pass props to template-rendered child components and subscribe to their events.

If you’re defining your Kendo component’s template using a Vue <template> block, you can bind props and event listeners just like you would with any regular Vue component—no extra hoops needed.

For example, let’s say you have a parent component with a sharedValue that needs to go to all child Kendo components, and you want to listen for a childEvent from them:

<template>
  <div>
    <!-- Your Kendo component using a Vue template -->
    <kendo-grid :data="gridData">
      <template v-slot:cell="{ dataItem }">
        <!-- Child component receiving the shared value and emitting an event -->
        <my-custom-child 
          :shared-prop="sharedValue" 
          @child-event="handleChildEvent"
          :item="dataItem"
        />
      </template>
    </kendo-grid>
  </div>
</template>

<script>
import MyCustomChild from './MyCustomChild.vue';

export default {
  components: {
    MyCustomChild
  },
  data() {
    return {
      sharedValue: 'This is passed to all children',
      gridData: [/* your grid data */]
    };
  },
  methods: {
    handleChildEvent(payload) {
      // Handle the event from any child component here
      console.log('Child event triggered:', payload);
    }
  }
};
</script>

Key Notes: #

• Use :shared-prop="sharedValue" to pass the parent’s value to every instance of the child component in the template.
• Use @child-event="handleChildEvent" to subscribe to the event emitted by any child—this works the same way as with standard Vue components.

If you’re setting up Kendo components programmatically (e.g., defining columns in a grid via a config array), you can inject props and event listeners into the template render function.

Here’s how to do it for a Kendo Grid with dynamic columns that render child components:

<template>
  <kendo-grid :columns="gridColumns" :data="gridData"></kendo-grid>
</template>

<script>
import MyCustomChild from './MyCustomChild.vue';

export default {
  components: {
    MyCustomChild
  },
  data() {
    return {
      sharedValue: 'Shared value for all children',
      gridData: [/* your data */],
      gridColumns: []
    };
  },
  created() {
    // Build your grid columns dynamically
    this.gridColumns = [
      {
        field: 'name',
        title: 'Name',
        // Define the template as a render function
        template: (dataItem) => {
          return this.$createElement(MyCustomChild, {
            // Pass props to the child component
            props: {
              sharedProp: this.sharedValue,
              item: dataItem
            },
            // Listen to child events
            on: {
              'child-event': this.handleChildEvent
            }
          });
        }
      }
    ];
  },
  methods: {
    handleChildEvent(payload) {
      console.log('Dynamic child event:', payload);
    }
  }
};
</script>

Key Notes: #

• Use this.$createElement (Vue’s render function API) to instantiate the child component, passing props via the props object and event listeners via the on object.
• The sharedValue from the parent is passed to every child instance created by this template.

Either approach will let you pass that single parent value to all child components and capture their events. The first is simpler for static templates, while the second is better for dynamic, code-driven component setups.

内容的提问来源于stack exchange，提问作者Mike Cole