Vue.js 将数据从刀片服务器传递到vue并保持父子同步？

我知道在Vue中，家长应该通过更新孩子，孩子应该通过更新家长

假设这是我的父组件

.vue

文件：

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

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

但是现在

我的父组件

不知道

类别

的数据。基本上只有孩子知道

类别

，父母和孩子之间对此没有任何沟通

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

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

他绑定的是

示例

组件的

：userId

道具，但不是父组件，或者简单地说：任何使用

示例vue

的模板都可以传递

字符串

道具，或者将

userId

道具绑定到字符串变量。类似的情况如下：

或

因此，您应该将

{{$category}}

分配给一个数据变量，而是绑定到一个子组件

prop

，这对父组件没有影响

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

更新

请参见以下示例，该示例将在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>

---

我只需要通过

props

将

category

传递给内联模板组件，如下所示：

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

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

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

---

现在，我的

我的父组件

完全了解该类别，它可以像往常一样使用

道具

和

$emit

与孩子通信。

对不起，我没有得到你的答案。我想将一个变量作为道具传递给子级，我可以随时从父级修改该变量。此外，变量的第一个内容将由blade传递。@Adam请查看更新的示例，并告诉我它是否有效

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

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

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