将 props 传递给 vue2 组件

Question

我正在使用一个非常简单的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 块中，我在哪里定义道具？

Answer 1

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

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

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

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