Question

我遵循此处使用Vue模板作为其组件中的Kendo UI模板的示例：

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

该示例不清楚如何为使用此方法呈现的组件提供属性（而不是在模板中向右呈现）。我需要在父子组件的所有实例中提供在父级中确定的单个值，并且还需要从子组件订阅发出的事件。我的假设是Vue.component（）的重载让我可以访问这个功能吗？

编辑：具体来说，我正在寻找一种方法，为从Vue组件创建的每个列都有一个标题模板。我需要每个列的模板来接收来自父级的数据，因此我知道如何构建它，并且我还需要每个列的模板将事件报告给父级。

Answer 1

文档确实缺乏。我同意你的这个观点。我采用了一种不同的方法来模仿Kendo UI组件并使其工作：https://codesandbox.io/s/github/ariellephan/vue-kendoui-template

首先，我有一个使用Kendo下拉列表组件的下拉组件：

contentview

为了渲染不同的样式/模板，我在父组件的道具中解析。在这种情况下，DropdownStyles

UITextField

您可以将模板移动到自己的文件或功能中。例如，第一个下拉列表使用DropdownTemplate作为其headerTemplate：

DropdownTemplate.vue

<template>
  <div>
    <p>Style with template {{template}}</p>
    <kendo-dropdownlist 
                    :template="template"
                    :headerTemplate="headerTemplate"
                    :data-source="dataSourceArray"
                    :data-text-field="'text'"
                    :data-value-field="'value'"
                    :filter="'contains'">
    </kendo-dropdownlist>
  </div>
</template>

<script>
export default {
  name: "Dropdown",
  props: ["dataSourceArray", "template", "headerTemplate"],
  data() {
    return {
      value: "Click Me",
      text: "I'm in Template template"
    };
  }
};
</script>

Answer 2

我认为关键点在于您附加的链接中的第3步（Kendo Vue模板使用）。（永远不要触摸剑道之前，如果有什么不对的话，请指正，谢谢。）

首先，请打开此Vue kendo Sandbox，您会找到一个下拉列表，然后每个选项是一个按钮加一个文本。如果单击该按钮，它将调用MyTemplate.vue中的一个方法和DropDownStyle.vue中的另一个方法，然后每个选项的背景为蓝色，从DropDownStyle.vue传递。

Kendo会将步骤3的这个功能绑定到它的attribute = template，然后fisrt参数（并且只有一个）是数据源的每个元素。

然后这个函数需要返回一个对象，包括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>

Answer 3

在传递模板方面非常奇怪的设计选择。避免使用KendoUI并专注于VueJS方法 - 您可以使用provide/inject吗？提供父母的价值并注入任何一个孩子？

还可以创建plugin来跟踪您希望应用程序中所有组件可用的事件或值。从本质上讲，插件将是一项服务。仅实例化一次的单例对象。

在vue中设置子组件的道具

3 个答案: