Установка реквизитов дочернего компонента в vue

Я следую приведенному здесь примеру использования шаблона Vue в качестве шаблона пользовательского интерфейса Kendo в своих компонентах:

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

В примере не очень ясно, как предоставить свойства компонентам, которые отображаются с помощью этого метода (в отличие от отображения прямо в шаблоне). Мне нужно указать одно значение, определенное в родительском элементе, для всех экземпляров этого дочернего компонента, а также мне нужно подписаться на события, генерируемые дочерним компонентом. Я предполагаю, что есть перегрузка Vue.component(), которая позволяет мне получить доступ к этой функции?

Редактировать: В частности, я ищу способ иметь шаблон заголовка для каждого столбца, созданного из компонента Vue. Мне нужен шаблон каждого столбца для получения данных от родителя, поэтому я знаю, как его создать, и мне также нужен шаблон каждого столбца, чтобы сообщить о событии родителю.

Источник

3 ответа

Решение

Я думаю, что ключевым моментом является Шаг 3 в прикрепленной вами ссылке (Использование шаблона Kendo Vue). (Никогда не прикасайтесь к Кендо, прежде чем, если что-то не так, поправьте меня, спасибо.)

Сначала откройте эту песочницу Vue kendo, вы найдете один выпадающий список, а затем каждая опция - одна кнопка плюс один текст. Если вы нажмете кнопку, он вызовет один метод в MyTemplate.vue и другой метод в DropDownStyle.vue, тогда его фон каждой опции будет синим, который передан из DropDownStyle.vue.

Kendo свяжет эту функцию шага 3 со своим атрибутом = template, тогда fisrt параметр (и только один) является каждым элементом источника данных.

Затем эта функция должна вернуть один объект, включая template и templateArgs, а затем создать его Kendo.

Поэтому мое решение - добавить вашу функцию /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>
Источник

Очень странный выбор дизайна с точки зрения передачи шаблона, как они делают. Избегая KendoUI и сосредотачиваясь на методах VueJS - вы могли бы использовать предоставить / ввести? Предоставление значения в родительском и инъекции в любой из детей?

Также может быть создан плагин для отслеживания событий или значений, которые вы хотите сделать доступными для всех компонентов в приложении. По сути, плагин был бы сервисом. Одноэлементный объект, который создается только один раз.

Источник

Документация действительно отсутствует. Я согласен с вами в этом. Я выбрал другой подход с использованием шаблонов для компонента пользовательского интерфейса Kendo, и он заработал: 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>

Для рендеринга разных стилей / шаблонов я разобрал в подпорках родительский компонент. В этом случае 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>
Источник
Другие вопросы по тегам