Реализация субкомпонентов в VueJS - PullRequest
Новая
       55

Реализация субкомпонентов в VueJS

0 голосов
/ 11 марта 2020

Я пытаюсь создать компонент <product> в VueJS. Этот продукт должен иметь 2 версии: желтый и красный. Я создал 2 подкомпонента <product_style>, чтобы хорошо определить эти варианты в HTML.

. Я мог бы заставить его работать нормально, как вы можете видеть в этом codeSandbox (который также показывает мои другие попытки, см. ниже): https://codesandbox.io/s/vuejs-sub-components-rqo69?fontsize=14&hidenavigation=1&theme=dark

Однако у меня есть 3 вопроса, потому что я чувствую, что то, как я это сделал, не оптимизировано и не рекомендуется:

1 - контактирование метод для родителя: В субкомпоненте <product_style> вместо вызова this.$parent.updateProduct(this.id); я видел, что лучшая практика заключается в том, чтобы $ emit событие вызывало updateProduct <product>. Поэтому я отправил событие вроде этого: this.$emit("mouseover-product-style",this.id); и добавил прослушиватель для такого продукта: <product name="Socks" @mouseover-product-style="updateProduct">, но я не могу заставить его работать. Обратите внимание, что я хочу, чтобы функция была вложена в компонент <product>, а не в основной экземпляр Vue.

2 - установка вычисляемых свойств: Когда создается <product>, он получает данные productStyles от своих $ children. Однако вычисленные свойства coloredStyle и color вначале видят this.productStyles[this.selectedProductStyle] как неопределенное. Итак, я проверяю, существует ли переменная. Почему это не определено? И есть ли лучший способ, так как это исправление выглядит неправильно для меня: 

computed: {
        coloredStyle() {
          //returns an error as this.productStyles[this.selectedProductStyle] is at first undefined
          //return {color:this.productStyles[this.selectedProductStyle].color};

          //works fine
          return this.productStyles.length
            ? { color: this.productStyles[this.selectedProductStyle].color }
            : { color: "black" };
        },
        color() {
          //returns an error as this.productStyles[this.selectedProductStyle] is at first undefined
          //return this.productStyles[this.selectedProductStyle].color;

          //works fine
          return this.productStyles.length
            ? this.productStyles[this.selectedProductStyle].color
            : "black";
        }
      },

3 - получение идентификатора дочернего компонента: Чтобы извлечь выбранный подкомпонент, мне пришлось установить идентификатор для каждого: 

<product_style :id="0" color="red"></product_style>
<product_style :id="1" color="yellow"></product_style>

Как мне этого избежать?

...