将数据从刀片传递到 vue 并保持父子同步？答案

【问题标题】：Pass data from blade to vue and keep parent-child in sync?将数据从刀片传递到 vue 并保持父子同步？
【发布时间】：2021-02-14 08:04:37
【问题描述】：

我知道在Vue中父母应该通过props更新孩子，孩子应该通过events更新他们的父母。

假设这是我的父组件.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中的category props。

现在，当我想在 Laravel 中使用 Vue 时，我通常使用内联模板并将值从刀片直接传递给我的组件（例如，https://stackoverflow.com/a/49299066/2311074 也建议）。

所以上面的例子我的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 的数据。 category基本上只有孩子知道，家长和孩子之间没有任何交流。

如何在不中断父子通信的情况下从刀片传递数据？

【问题讨论】：

标签： vue.js laravel-5 laravel-blade

【解决方案1】：

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

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

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

或

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

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

在下面的 sn-p 中，您只绑定字符串，而是绑定数据键：

<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>

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

// 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>

【讨论】：

对不起，我没有得到你的答案。我想将一个变量作为道具传递给孩子，我可以随时从父母那里修改。此外，变量的第一个内容将由刀片传递。
@Adam 查看更新后的示例，让我知道它是否有效

【解决方案2】：

我只需要通过props 将category 传递给内联模板组件，如下所示：

@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我不得不设置道具和初始化是使用create方法：

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

现在我的my-parent-component 完全了解该类别，它可以像往常一样使用props 和$emit 与孩子交流。

【讨论】：