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

Posted 2023-02-22

【中文标题】将数据从刀片传递到 vue 并保持父子同步？

【英文标题】：Pass data from blade to vue and keep parent-child in sync?

【发布时间】：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://***.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基本上只有孩子知道，家长和孩子之间没有任何交流。

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

【参考方案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 与孩子交流。