时间戳

首页 > 解决方案 > 将数据从模板传递到组件

vue.js - 将数据从模板传递到组件

问题描述

我有以下内容，据我了解，应该将 html 属性的值传递给具有相同名称的@Prop，但是我的 console.log 始终未定义。这是如何实现的？

import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';

@Component({})
    export default class RelayComponent extends Vue {
    @Prop([String]) service: string;

    constructor() {
        super();
        console.log(this.service);
...

HTML

<template>
    <div service="expecting this value passed"></div>
</template>
<script src="./relay.ts"></script>

标签： vue.js

解决方案

Vue 道具

Vue props 旨在将数据从父 vue 组件或实例传递给子 vue 组件。

所以你有一个 vue 组件，你设置了 a@Prop然后你得到了parent 的 html 的prop 。如果你有一个my-parent和my-child组件，my-parent模板可以是：

<template>
    <my-child count="7"></my-child>
</template>

所以像这样的子组件：

<template>
    <div class="counter">{{count}}</div>
</template>

<script lang="ts">
  import Vue from 'vue';
  import { Component, Prop } from 'vue-property-decorator';

  @Component({})
    export default class myChild extends Vue {
    @Prop() count: number;
  }
</script>

会得到7它的计数道具。

现在，在您的情况下，只有一个组件，您正在尝试从HTML设置service组件的变量。这有点奇怪，因为 Vue 的目的是从组件数据中实现声明式渲染：是 HTML 对数据更改做出反应，而不是您的组件从 HTML 中获取数据。

（当然，您也可以设置v-model和事件侦听器以使您的组件对用户输入做出反应，但那是另一回事了）。

基本上，如果我正确理解了您想要做什么，那么您的问题是您正试图service从 RelayComponent 组件的 HTML 中获取道具。

相反，您应该在组件 parent 中service设置道具：

// Code of some parent component that renders the RelayComponent
<template>
  <relay-component service="this would set the service prop as a string"></relay-component>
</template>

只是，在处理对象时，您通常不会传递一个纯字符串，而是一个 javascript 对象，并且service变量可能是一个对象，所以更改是您落后于这样的事情：

<template>
  <relay-component v-bind:service="serviceVariableInTheParentComponent"></relay-component>
</template>

父组件service在其data.

 构造函数和生命钩子

小心constructor在 vue 类组件中显式调用。如果在构造函数中修改组件状态，就可以破坏组件。

或许，您应该考虑使用created() 生命周期钩子，而不是constructor()在每个 Vue 组件中。

推荐阅读