将 props 传递给 vue2 组件

Posted 2023-02-23

【中文标题】将 props 传递给 vue2 组件

【英文标题】：passing props into vue2 component

【发布时间】：2018-08-11 05:43:36

【问题描述】：

我正在使用一个非常简单的vue 组件，我想通过道具将信息传递给它。在 html 中它看起来像：

<myapp v-bind:source-key="some_key" v-bind:destination-key="some_other_key"></myapp>

组件如下所示：

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-default">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default 
        props: ['sourceKey', 'destinationKey'],
        mounted() 
            this.$http.get('/map/' + sourceKey + '/' + destinationKey)
                .then(function (response) 
                    console.dir(response)
                )
                .catch(function (error) 
                    console.dir(error);
                );
            console.log('got here')
        
    
</script>

我希望这会在组件中设置道具 sourceKey 等于 some_key 和 destinationKey 等于 some_other_key，但我遇到了错误：

[Vue warn]: Property or method "some_key" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

所以看起来期望值被视为关键？然后还有更多错误说从未定义过sourceKey 变量：

[Vue warn]: Error in mounted hook: "ReferenceError: sourceKey is not defined"

如果不在props 块中，我在哪里定义道具？

【问题讨论】：

this.$http.get('/map/' + sourceKey + '/' + destinationKey) 在该行中，您必须使用 this 关键字 (this.sourceKey) 访问您的道具

【参考方案1】：

这里：this.$http.get('/map/' + sourceKey + '/' + destinationKey)

在<script> 中，您需要访问this.sourceKey 和this.destinationKey，以指定您希望Vue 实例的属性（而不是其他地方定义的变量）。您只能在模板中省略 this.。

对于您的第一个错误，请确保 some_key 和 some_other_key 是在您的 Vue 实例中定义的变量，在 data() ... 下，计算属性等，如错误消息所示。

【讨论】：

我不明白为什么需要定义some_key 和some_other_key，因为它们是分配给sourceKey 和destinationKey 属性的值？

抱歉，如果我不清楚，我的意思是确保它们被定义在在父级中，即渲染<myapp /> 组件的那个。警告是为了防止拼写错误等。

谢谢——您的回答帮助了我完成第二部分，但我仍然无法使用此代码将 some_key 作为 sourceKey 道具的值传递

【参考方案2】：

在父母的模板中：

<myapp v-bind:source-key="some_key" v-bind:destination-key="some_other_key"></myapp>

你得到错误：

[Vue 警告]：属性或方法“some_key”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。见：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

因为父级在其data() 中没有some_key。

在孩子中：

[Vue 警告]：挂载钩子错误：“ReferenceError: sourceKey is not defined”

您会收到一个错误，因为在 Vue 实例函数内部，必须使用 this 引用 prop。

在下面查看纠正这两个错误的演示。

Vue.component('myapp', 
  template: "#myAppTemplate",
  props: ['sourceKey', 'destinationKey'],
  mounted() 
    this.$http.get('/map/' + this.sourceKey + '/' + this.destinationKey) // this fixes "ReferenceError: sourceKey is not defined"
      .then(function(response) 
        console.dir(response)
      )
      .catch(function(error) 
        console.dir(error);
      );
    console.log('got here')
  
)

new Vue(
  el: '#app',
  data: 
    some_key: 'aaa',       // this fixes [Vue warn]: Property or method "some_key" is not defined
    some_other_key: 'bbb'  // this fixes [Vue warn]: Property or method "some_other_key" is not defined
  
);

<script src="https://unpkg.com/vue@2.5.13/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.4.0"></script>

<div id="app">
  <myapp v-bind:source-key="some_key" v-bind:destination-key="some_other_key"></myapp>
</div>

<template id="myAppTemplate">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-default">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>