在vue中设置child组件的props

Question

我在这里使用 Vue 模板作为组件中的 Kendo UI 模板的示例：

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

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

编辑：具体来说，我正在寻找的是一种为从 Vue 组件创建的每个列创建一个 header 模板的方法。我需要每个列的模板从 parent 接收数据，所以我知道如何构建它，我还需要每个列的模板将事件报告回 parent。

Answer 1

确实缺少文档。我同意你的这个观点。我采用了一种不同的方法来为 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>

为了呈现不同的 styles/templates，我从父组件中解析了 props。在这种情况下，DropdownStyles

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

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

Answer 2

我认为关键点是您所附的 link 中的步骤 3（Kendo Vue 模板用法）。（之前绝对不要碰Kendo，如有不对，指正，谢谢。）

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

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

那么这个函数需要return一个包含template和templateArgs的对象，然后Kendo构造它。

所以我的解决方案是将您的 function/callback/styles 添加到 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 吗？在 parent 中提供值并注入任何 children?

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

在vue中设置child组件的props

Setting props of child component in vue

kendo-ui

vue.js

kendo-ui-vue