vue.js - vue中设置子组件的props

Question

我正在按照此处的示例在其组件中使用 Vue 模板作为 Kendo UI 模板:

https://www.telerik.com/kendo-vue-ui/components/framework/vue-templates/

该示例并没有很清楚地说明如何向使用此方法呈现的组件提供属性(与直接在模板中呈现相反)。我需要向该子组件的所有实例提供在父组件中确定的单个值，并且我还需要订阅子组件发出的事件。我的假设是 Vue.component() 有一个重载让我可以访问这个功能？

编辑:具体来说，我正在寻找的是一种为从 Vue 组件创建的每一列提供标题模板的方法。我需要每一列的模板来接收来自父级的数据，以便我知道如何构建它，我还需要每一列的模板来向父级报告事件。

Answer 1

我认为关键点是您所附链接中的第 3 步(Kendo Vue 模板用法)。 (之前没接触过剑道，如有不妥请指正，谢谢。)

首先，请打开这个Vue kendo Sandbox ，你会发现一个下拉列表然后每个选项都是一个按钮加一个文本。如果你点击按钮，它会调用 MyTemplate.vue 中的一个方法和 DropDownStyle.vue 中的另一个方法，然后它的每个选项的背景都是从 DropDownStyle.vue 传递过来的蓝色。

Kendo 会将第 3 步的这个函数绑定(bind)到它的 attribute=template，然后第一个参数(也是唯一一个)是数据源的每个元素。

然后这个函数需要返回一个对象，包括template和templateArgs，然后Kendo构造它。

所以我的解决方案是将您的函数/回调/样式添加到 templateArgs 中，然后在 MyTemplate.vue 中执行您需要的操作。

下面是从步骤 3 扩展而来的代码。

  methods: {
    getMyTemplate: function (e) {
      // parameter=e: it is the value of each element of the dropdown
      e.callback = this.eventCallback
      e.styles="background-color:blue"
      return {
            template: MyTemplate,
            templateArgs: e
        }
    },
    eventCallback: function (data) {
      console.log(this.dropdowns)
    }
  }

下面是 MyTemplate.vue.

<template>
    <span :style="templateArgs.styles">
        <button @click="buttonClick();templateArgs.callback()">{{templateArgs.value}}</button>
        {{templateArgs.text}}
    </span>
</template>

<script>
export default {
    name: 'template1',
    methods: {
        buttonClick: function (e) {
            console.log('props',this.templateArgs.styles)
        }
    },
    data () {
      return {
          templateArgs: {
            callback:function(){
              console.log('Test')
            },
            styles:''
          }
      }
    }
}
</script>