Можно ли создать однофайловый компонент Vue внутри файла шаблона Blade? - PullRequest
Новая
       36

Можно ли создать однофайловый компонент Vue внутри файла шаблона Blade?

1 голос
/ 03 апреля 2019

Это вопрос о Laravel и Vue.

За последний год я уже пару раз пытался создать компонент Vue в шаблоне Blade, но я не смог его получить.работать.Я чувствую, что это возможно, но я не нашел пример того, как кто-то это делает.Я искал в Google каждый раз, когда пытался это сделать, но не могу найти пример.

Вместо того, чтобы создавать однофайловый компонент Vue (SFC) и вызывать его из шаблона Blade, например:

@extends('layouts.root')

@section('title', 'Some Page')

@section('content')
<my-component :some-state="{{ $someData->toJson() }}"></my-component>
@endsection

Я хотел бы создать компонент Vue внутри шаблона Blade, примерно так:

resources / views / some / page.blade.php 

@extends('layouts.root')

@section('title', 'Some Page')

@section('content')
<div>
    <my-component
        :some-state="{{ $someData->toJson() }}"
    ></my-component>
</div>
@endsection

<template>
    <div>
        {{ $object }}
    </div>
</template>

<script>
export default {
    name: 'my-component',

    props: {
        type: Object,
        required: true,
    },

    data() {
        return {};
    },

    computed: {},

    methods: {},
}
</script>

<style scoped>
    .div { background-color: red; }
</style>

Я ищу способ сделать все это из файла page.blade.php.

Я близко, или это вообще возможно?

Моя мотивацияпотому что у меня есть около 30 шаблонов Blade, и если я решу, что я хочу иметь в них некоторое состояние на стороне клиента или использовать JavaScript вместо Blade (для таких вещей, как v-if вместо @if () @endif), тогда мне нужно создатьеще около 30 файлов для этих компонентов Vue.

Возможно, было бы неплохо пропустить этот шаг создания файла и использовать эти файлы шаблона Blade для доставки данных из Laravel и иметь там также полностью функциональный Vue SFC.Возможно, это дикая идея, и идиоматическим выбором было бы сделать больше компонентов Vue в папке Laravel resources/assets/js/components, но я просто хочу знать, возможно ли это.Кто-нибудь может пролить свет на это занятие?

1 Ответ

1 голос
/ 04 апреля 2019

Учитывая, что вы используете отдельную файловую форму Vue (шаблон, скрипт, стиль), вы не можете использовать ее таким образом, потому что специальные коды Vue должны быть преобразованы в собственный javascript с помощью инструментов перед их переходом в браузер.

Если вы хотите использовать в любом случае, есть еще один способ создания компонента, но не предпочтительный способ:

Здесь я показал базовую идею о том, как это можно сделать, но вы должны отредактировать это для своих нужд.. 

<div id="vue-app">
    <todo-component></todo-component>
</div>

//then create component by using x-template way
<script type="x-template" id="todo-component">
    <div>
        <span :title="Your normal Vue codes title">{{text}}</span>
    </div>
</script>


//and add component to Vue.

<script>
    Vue.component('todo-component', {
        template: '#todo-component',
        data: function () {
            return {
                text: 'Your normal Vue codes here'
            };
        },
    });

    var app = new Vue({
        el: '#vue-app'
    });
</script>
...