Question

我正在尝试在包含组件的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>

autocomplete-component.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

为此，您需要使用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>

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

1 个答案: