4

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

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

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

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

4

3 回答 3

1

我认为关键是您附加的链接中的第 3 步（Kendo Vue 模板使用）。（以前千万不要碰剑道，如有不对之处，请指正，谢谢。）

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

Kendo 会将第 3 步的这个函数绑定到它的属性=模板，然后第一个参数（并且只有一个）是数据源的每个元素。

然后这个函数需要返回一个对象，包括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>
于 2018-04-28T16:55:05.750 回答
1

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

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

于 2018-05-02T15:21:43.400 回答
0

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

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

<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>

为了呈现不同的样式/模板，我从父组件中解析了 props。在这种情况下，下拉样式

<template>
  <div id="DropdownStyles">
    <h1>KendoUI dropdown instances with different templates</h1>
    <Dropdown
  v-for="dropdown in dropdowns"
  v-bind:key="dropdown.id"
  v-bind:title="dropdown.title"
  v-bind:data-source-array="dropdown.dataSourceArray"
  v-bind:template="dropdown.template"
  v-bind:headerTemplate="dropdown.headerTemplate"
></Dropdown>
  </div>
</template>

<script>
import Dropdown from "./Dropdown";
import DropdownTemplate from "./DropdownTemplate";

export default {
  name: "DropdownStyles",
  components: { Dropdown },
  data() {
    return {
      dropdowns: [
        {
          id: 1,
          title: "x style",
          dataSourceArray: [
            "Football",
            "Tennis",
            "Basketball",
            "Baseball",
            "Cricket",
            "Field Hockey",
            "Volleyball"
          ],
          template: `<strong class="custom-dropdown">x #:data#</strong>`,
          headerTemplate: DropdownTemplate.template
        },
        {
          id: 2,
          title: "+ style",
          dataSourceArray: [
            "Football",
            "Tennis",
            "Basketball",
            "Baseball",
            "Cricket",
            "Field Hockey",
            "Volleyball"
          ],
          template: `<strong class="custom-dropdown">+ #:data#</strong>`,
          headerTemplate: `<div><h3 style="padding-left:10px;">Sports 2</h3></div>`
        }
      ]
    };
  }
};
</script>

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

下拉模板.vue

<script>
export default {
  name: "DropdownTemplate",
  props: ["header"],
  template: `<div>
    <div><h3>Sports 1</h3></div>
  </div>`,
  data() {
    return {};
  }
};
</script>
<style scoped>
h3 {
  padding-left: 10px;
}
</style>
于 2018-04-27T07:11:32.710 回答