Vue component. Как передать в template шаблон из import?

Question

[chelkaz]

Если так, то работает:

// Работает
Vue.component('my-component', {
    template: '<div>555</div>'
});

А если так, то не работает:

import Example from './components/Example.vue'

// test
Vue.component('my-component', {
    template: Example
});

Ошибка:

[Vue warn]: invalid template option:[object Object]

Сам компонент:

<template>
    <div>
        I'm an example component!
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

Comments

[Evgeny Kulakov]

А почему решили, что так будет работать? И что хотите сделать? В template передается строка с шаблоном, вы же пытаетесь импортировать vue файл... Концепция vue файлов есть концепция однофайловых компонентов, т.е. каждый файл представляет собой шаблон, логику и стили какого-то компонента.

[chelkaz]

А как сделать однофайловый компонент, я не могу найти ответа.
Я например хочу сделать блок с формой поиска. Она будет в файле, например Search.vue
И потом этот я хочу ее вставит в Vue.component('search' )
Как мне сделать и какая логика правильная?

[Evgeny Kulakov]

Вот это читали: https://ru.vuejs.org/v2/guide/single-file-componen... ?
Создавая vue файл вы по сути, создаете компонент. Далее его можно импортировать в др.компонент используя import SomeComponent from 'some-component.vue'
Также использование vue файлов предполагает, что вы используете инструменты типа Webpack или Browserify.

[chelkaz]

Evgeny Kulakov: А скажите пожалуйста, вообще правильно будет повсеместно использовать "Однофайловые компоненты" ? Например один для формы поиска, другой для блока логина, третий для блока регистрации... и так далее? Или нужен другой подход?

[Evgeny Kulakov]

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

[chelkaz]

Evgeny Kulakov: Я вот только не понимаю, у меня уже установлен WebPack в package.json? Там где development в секции scripts.

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "cross-env": "^3.2.3",
    "laravel-mix": "^0.8.3",
  },
  "dependencies": {
    "axios": "^0.16.2",
    "normalize.css": "^7.0.0",
    "vue": "^2.3.4",
    "vue-router": "^2.6.0"
  }
}

[Evgeny Kulakov]

chelkaz: это скрипт, где webpack вызывается из ваших установленных модулей. Но странность в том, что в дев.зависимостях вебпака у вас нет.

Answer 1

[Антон Антон]

import Example from './components/Example.vue'

// test
Vue.component('my-component', Example);

Ну и нужно использовать nodejs и webpack. Если нет опыта, то проще всего начать так: после установки nodejs в консоли:

npm install vue-cli -g
vue-init webpack-simple testproject

Comments

[chelkaz]

А скажите пожалуйста, вообще правильно будет повсеместно использовать "Однофайловые компоненты" ? Например один для формы поиска, другой для блока логина, третий для блока регистрации... и так далее? Или нужен другой подход?

[Антон Антон]

chelkaz: однофайловые компоненты удобны:
для изоляции логики работы
для повторного использования
и того и другого можно достичь другими методами, но однофайловые компоненты очень удобны тем, что сразу обе цели достигаются :)