Question

这是关于Laravel和Vue的问题。

在过去的一年中，我已经尝试过几次在Blade模板中创建Vue组件，但是我无法使其正常工作。我觉得这是有可能的，但是我还没有找到有人这样做的例子。每次尝试进行搜索时，我都会搜索Google，但是找不到示例。

不是创建Vue单文件组件（SFC）并从Blade模板调用它，就像这样：

@extends('layouts.root')

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

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

我想在Blade模板中创建Vue组件，如下所示：

资源/视图/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之类的东西，而不是{{1 }}），那么我需要为这些Vue组件再创建大约30个文件。

最好省略该文件创建步骤，并使用这些Blade模板文件从Laravel传送数据，并且在那里也具有功能齐全的Vue SFC。也许这是个疯狂的主意，惯用的选择是在Laravel的文件夹@if () @endif中制作更多的Vue组件，但我只是想知道是否可行。有人可以阐明这一追求吗？

Answer 1

考虑到您正在使用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>

是否可以在Blade模板文件中创建Vue单文件组件？

1 个答案: