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

Question

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

自动完成.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 可以存在于刀片中，但使用包含的组件中的功能和数据？

Answer 1

为此，您需要使用作用域插槽。

在您的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>