laravel vue，在刀片模板中使用 vue 代码答案

【问题标题】：laravel vue, using vue code in blade templatelaravel vue，在刀片模板中使用 vue 代码
【发布时间】：2020-06-22 22:54:13
【问题描述】：

我正在尝试访问包含该组件的 laravel 刀片中的 vue 组件功能数据，但我无法让它工作。使用此代码，网站加载到空白页面，但如果我从刀片跨度中删除 @，则页面加载自动完成输入并且它不会访问数据

autocomplete.blade.php

<autocomplete :items="items" v-model="item" :get-label="getLabel" :component-item='template' @update-items="updateItems">
</autocomplete>
<div>
    <span>@{{ item.name }}</span>
</div>

<div>
  <autocomplete-component></autocomplete-component>
</div>

自动完成组件.vue

<script>
export default {
  props: {
    item: {required:true},
    searchText: {required:true}
  },
  data () {
        return {
            item: {id: 9, name: 'Lion', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'},
            items: [],
        }
  },
  methods: {
    getLabel (item) {
      return item.name
    },

  }
};
</script>

如何使自动完成 div 可以存在于刀片中，但使用包含的组件中的功能和数据？

【问题讨论】：

标签： javascript laravel vue.js

【解决方案1】：

为此，您需要使用scoped slots。

在您的autocomplete.vue 中，您需要插入一个插槽并为该插槽提供物品。

粗略地说-

自动完成：

<template>
    <slot :item="item"></slot>
</template>

// ...script etc

刀片视图：

<autocomplete :items="items" v-model="item" :get-label="getLabel" :component-item='template' @update-items="updateItems">
    <template v-slot:default="slotProps">
        @{{ slotProps.item }}
    </template>

    // OR
    <template v-slot:default="{item}">
        @{{ item }}
    </template>
</autocomplete>

【讨论】：