如何将刀片文件中的动态数据作为道具传递给 vue 组件？答案

【问题标题】：How to pass dynamic data from a blade file as a prop to a vue component?如何将刀片文件中的动态数据作为道具传递给 vue 组件？
【发布时间】：2020-12-04 06:41:33
【问题描述】：

在我的刀片文件中 -

<b-input-group class="mt-3 mb-3" size="sm">
    <b-form-input id="filterinput" placeholder="Filter" type="text" onInput="showCurrentValue(event)"></b-form-input>
</b-input-group>
<invoices-component title="a" forminput='value'>
</invoices-component>


<script>
    var value ='';
    function showCurrentValue(event)    { 
        value = event.target.value;      
        console.log(value)
    };     
 
    
</script>

在我的 vue 组件中 -

<template>
  <div class="my-5">
    <h2>Invoice inner</h2>
    <h2>{{title}}</h2>
    <h2>{{forminput}}</h2>   
  </div>
</template>

<script>
export default {
  props: ["title", "forminput"],
};
</script>

在浏览器中输出-

在刀片模板中：我有一个函数可以在键更改时监听输入字段 (showCurrentvalue)。如何将输入值作为道具传递？

vue组件中：传递了title值（即A），但是forminput值是静态的。

如何在每次更改时动态传递输入字段中键入的值？

【问题讨论】：

标签： javascript laravel vue.js

【解决方案1】：

您需要使用 v-bind: 属性或短语法

普通语法

<invoices-component title="a" v-bind:forminput='value'>
</invoices-component>

短句法

<invoices-component title="a" :forminput='value'>
</invoices-component>

或者如果你从 Laravel 控制器传递值

# laravel controller
public function formView(param)
{
    $data = ["key" => "value", "key" => "value"];
    return view("my.view", $data);
}

<!-- blade file -->
<invoices-component title="a" :forminput='{{$data}}'>
</invoices-component>

更新

即使使用 v-bind 更正，我认为您的代码也不会工作，因为组件无法获取脚本标签内的值。您可以做的是以更 Vue 的方式包装当前内容，并通过组件而不是刀片文件传递道具。在输入上使用 v-model 不需要函数来更新值，它会自动从 Vue 完成。

NewComponent.vue

<template>
    <b-input-group class="mt-3 mb-3" size="sm">
        <b-form-input id="filterinput" placeholder="Filter" type="text" 
    v-model="formInput"></b-form-input>
    </b-input-group>
    <invoices-component title="a" :forminput='formInput'>
    </invoices-component>
</template>

<script>
import InvoicesComponent from '......'

export default {
    components: {InvoicesComponent}
    data() {
        return {
            formInput: ''
        }
    }
}
</script>

刀片

<new-component />

【讨论】：