时间戳

首页 > 解决方案 > laravel 刀片模板文件中与 Vue3 内联模板（使用插槽）的 2 方式绑定

laravel - laravel 刀片模板文件中与 Vue3 内联模板（使用插槽）的 2 方式绑定

问题描述

在 Vue3 中，内联模板已被贬低，现在使用插槽。是否可以为刀片模板中编写的 Vuejs 组件的变量进行 2 路绑定？

我想为与刀片模板内联编写的 Vue 组件进行 2 向绑定。虽然我知道我可以传递数据，<example-component name="Hello World"> 但到处添加道具是一项繁重的工作。

Vue 建议使用插槽作为内联模板替换，因为它已在 v3 中删除，但是，该文档没有任何意义。我已经使用下面的代码显示了组件。这是一个简单的文本字段+段落来显示名称。

home.blade.php（为简洁起见删除了不必要的 HTML）

<div>
    <h1>Dashboard</h1>

    <example-component>
        <div class="container">
            <input v-model="name" placeholder="Change Name"/>
            <p> Name is @{{ name }} </p>
        </div>
    </example-component>
</div>

示例组件.vue

<template>
    <div>
        <slot></slot>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                name: 'hi',
            }
        }
    }
</script>

不幸的是，这不起作用，名称不会以“hi”开头，并且在更改文本字段时不会更新。当我尝试类似<slot :name=name></slot>. 我相信这会将名称传递到插槽部分，组件会在消失之前呈现一秒钟。

是否有可能在刀片模板中与 vue 变量进行双向绑定？任何帮助表示赞赏。

标签： laravelvue.jslaravel-bladevuejs3

解决方案

您将数据存储在子组件中是否有原因？反应性设计通过向下传递道具并向上发射事件来工作，即使（不幸的是）在将变量传递给父组件时没有保持反应性。似乎有点违反直觉，但我可能会在您尝试创建的内容中遗漏一些东西。

但是，如果您将数据放入应用程序而不是组件中，它将起作用。

// app 
const app = Vue.createApp({
  data() {
    return {
      name: 'hi',
    }
  }
})

// component
app.component('example-component', {
template: `
    <div>
        <slot></slot>
    </div>`,
})

app.mount("#app");
<script src="https://unpkg.com/vue@3.0.5/dist/vue.global.prod.js"></script>

<div id="app">
    <h1>Dashboard</h1>

    <example-component>
        <div class="container">
            <input v-model="name" placeholder="Change Name"/>
            <p> Name is @{{ name }} </p>
        </div>
    </example-component>
</div>
<!--

推荐阅读