VueJS, где объявлять реквизиты в общих компонентах

Question

Я создаю новый общий компонент, и я хотел бы знать, где лучше объявить реквизиты либо в функции данных, либо непосредственно внутри объекта экспорта по умолчанию .Также хотелось бы узнать, какие основные отличия между собой

Пример 1:

export default {
    props: {
      hasColor: {
        type: Boolean,
        default: false
             },
      hasName: {
        type: Boolean,
        default: true
             },
          },
    data () {
        return {
         test: '',
    }
  }

Пример 2:

 export default {
    data () {
      return {
        props: {
           hasColor: {
             type: Boolean,
             default: false
               },
           hasName: {
             type: Boolean,
             default: true
               }
             }
           }

Answer 1

Из другого вопроса стека:
Свойства предназначены для распространения и управления из родительских компонентов, в то время как данные - это внутреннее состояние компонента (за которое отвечает компонент).
Эта концепция взята из React, насколько я знаю, и она работает довольно хорошо.https://github.com/uberVU/react-guide/blob/master/props-vs-state.md

Теперь зависит, зависят ли ваши переменные от родителя или они независимы от других данных.

Я предпочитаю использовать реквизиты, если родительский компонент не добавляет или не изменяетлогика, но каждый компонент отличается.

Answer 2

Действителен только первый.Второй может или не может работать, но реквизит не данные.Даже не пытайтесь определить их как таковые.

Подумайте о том, чтобы добавить в свою сборку плагин Vue eslint и использовать рекомендуемые правила для отлова всего, что кажется необычным.Он научит вас писать унифицированный код Vue, выводя ошибки всякий раз, когда вы делаете что-то, что обычно не делается.