将数据从 blade 传递到 vue 并保持 parent-child 同步？

Question

我知道在 Vue 中 parents 应该通过 props and children should update their parents through events.

更新 children

假设这是我的 parent 组件 .vue 文件：

<template>
<div>
    <my-child-component :category="category"></my-child-component>
</div>
</template>

<script>
export default {
  data: {
     return {
       category: 'Test'
     }
  }
}
</script>

当我更新此组件中的 category 数据时，它也会更新 my-child-component 中的类别道具。

现在，当我想在 Laravel 中使用 Vue 时，我通常使用内联模板并将 blade 中的值直接传递到我的组件（例如 ).

所以上面的例子我的 my-parent-component.blade.php 可能看起来像这样：

@push('scripts')
   <script src="/app.js"></script>
@endpush

<my-parent-component inline-template>
    <my-child-component :category="{{ $category }}"></my-child-component>
</my-parent-component>

但是现在my-parent-component不知道category的数据。基本上只有 child 知道 category 而 parent 和 child 之间没有关于它的通信。

如何在不中断 parent 和 child 通信的情况下传递来自 blade 的数据？

Answer 1

您对 this answer 的引用与您要查找的内容完全不同！

他绑定了 example 组件的 :userId 属性，但没有绑定 parent 组件，或者简单地说：任何使用 example vue 的模板都可以通过 string prop 或将 :userId prop 绑定到字符串变量。以下类似：

<example :userId="{{ Auth::user()->id }}"></example>

或

<example :userId="'some test string'"></example>

因此，您应该将 {{ $category }} 分配给数据变量，而是绑定到 child 组件 prop，这对 parent 没有影响。

在以下代码段中，您仅绑定了字符串，而是绑定了数据键：

<my-child-component :category="{{ $category }}"></my-child-component>

更新

请参阅以下示例，该示例将在 3 秒后更改 h1 标题

 // HelloWorld.vue
<template>
 <app-name :name="appName" @appNameChanged="appName = $event"></app-name>
</template>

<script>
    export default {
        props: ['name'],
        data() {
            return {
                appName: null
            }
        },
        mounted() {
            // NOTE: since Strings are immutable and thus will assign the value while objects and arrays are copied by reference
            // the following is just for the purpose of understanding how binding works
            this.appName = this.name;
        }
    }
</script>

呈现应用程序标题的模板，或者您可以说 child 组件

// AppName.vue
<template>
   <h1>{{ name }}</h1>
</template>

<script>
    export default {
        props: ['name'],
        mounted() {
          setTimeout(() => {
             this.$emit('appNameChanged', 'Change App')
          }, 3000);
        }
    }
</script>

下面是它在 welcome.blade.php

中的使用方式

<div id="app">
  <hello-world :name="'Laravel App'"></hello-world>
</div>

Answer 2

我只需要像这样通过 props 将 category 传递给 inline-template 组件：

@push('scripts')
   <script src="/app.js"></script>
@endpush

<my-parent-component :initcategory="{$category}}" inline-template>
    <my-child-component v-model="category"></my-child-component>
</my-parent-component>

在 my-parent-component 中，我必须设置道具并使用创建方法进行初始化：

export default {
  props: {
    initcategory: '',
  },
  data() {
    return {
      category: '',
    };
  },
  created(){
    this.category = this.initcategory;
  }
}

现在我的 my-parent-component 完全知道类别，它可以像往常一样使用 props 和 $emit 与 child 通信。

将数据从 blade 传递到 vue 并保持 parent-child 同步？

Pass data from blade to vue and keep parent-child in sync?

vue.js

laravel-5

laravel-blade