javascript - 从 Laravel View 将属性传递到 Treeselect vue 组件

Question

我正在尝试包装 Vue-Treeselect 链接:https://vue-treeselect.js.org/#node在它自己的 vue 组件中，这样我就可以简单地拥有例如<tree-select></tree-select>在 Laravel View 文件中我需要的地方。

我不明白的是，如何从 Laravel View 中传递一些实例特定的 Prop 并使用组件模板内的属性值？ 我想从 Laravel View 中传递一个字段名称，如下所示:<tree-select name='property_ids'></tree-select>以后的 vue 组件模板可以使用传入的 name 作为组件模板内的 name 属性。

我正在使用 https://vue-treeselect.js.org/ 中的入门代码 所以在我的 Laravel View 表单中我想有这个标签
<tree-select name='property_ids'></tree-select> 但我该如何制作 name vue 组件模板内的属性值(下面的示例代码)？

<template>
    <div>
        <treeselect v-model="value" :multiple="true" :options="options" name="passedInName"></treeselect>
    </div>
</template>

<script>
    // import the component
    import Treeselect from '@riophae/vue-treeselect'
    // import the styles
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'

    export default {
        // register the component
        components: { Treeselect },
        data() {
            return {
                // define the default value
                value: [],
                // define options
                options: [  {
                    id: 'b',
                    label: 'b',
                }, {
                    id: 'z',
                    label: 'z',
                }, {
                    id: 'x',
                    label: 'x',
                } , {
                    id: 'v',
                    label: 'v',
                }],
            }
        },
    }
</script>

Answer 1

您必须在 vue 组件中声明传递的 props 才能在模板中使用它们

<template>
    <div>
        <!-- Pass the prop to the name attribute -->
        <treeselect v-model="value" :multiple="true" :options="options" :name="this.name">
        </treeselect>
    </div>
</template>

<script>
export default {
    props: ['name'], // <-- The declared prop
};
</script>