VueJS 使用 prop 作为数据属性值

Question

我真的很挣扎于以下情况：

一些索引页面：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8"/>
  </head>
  <body>
    <div id="app">

      <ul>
        <li>some existing option</li>
        <example-component :foo="foo" :bar="bar"/>
      </ul>

      <a @click.prevent="showDetail(1, 'abc')" href="#" >Click ME!</a>

    </div>


    <script src="app.js"></script>


  </body>
</html>

一些单文件组件：

<template>
    <li><a v-show="checkBool" data-toggle="tab" class="some-class" href="#container-div" data-tab-url="{{ this.foo }}">{{ this.bar }}</a></li>
</template>



<script>
export default {

  props: ['foo', 'bar'],


  computed: {
    checkBool: function() {
      return (this.foo != undefined && this.bar != undefined )
    }

  }

}
</script>

app.js看起来像这样：

import Vue from 'vue'

Vue.component('example-component', require('ExampleComponent.vue'));

const app = new Vue({
    el: '#app',

    props: [
      'foo',
      'bar'
    ],

    data: {
      foo: '',
      bar: ''
    },

     methods: {
      showDetail: function (foo, bar) {
        this.foo = foo,
        this.bar = bar
      }
  }
});

我在 laravel 安装下使用带有 webpack 的 babel。

场景是这样的：

当我点击Click ME! 链接、 foo和bar被更新并传递给组件（这部分正在工作）
本例中名为checkBool的计算属性变为 true，因此我将看到新的列表项（这部分正在工作）
新列表项，有一个链接，文本正确设置为bar （这部分也有效）

在这一点上，我知道组件和父级之间的值设置和通信工作正常，但是data-tab-url="{{ this.foo }}"部分让我发疯。

我没有按预期解析 mustache 语法并返回data-tab-url="1" ，而是得到引号之间所有内容的解析/转义值。

类似于data-tab-url="%7B%7B+this.foo+%7D%7D" 。

现在，如何防止编码发生？ 从我读过的内容来看，在vuejs 1.*中vuejs 1.*有过一种方法。 使用三个括号： {{{ this.foo }}}但现在不推荐使用v-html ，我不能在我的示例中使用它。

Answer 1

像这样绑定属性:data-tab-url="foo" 。

这将为受影响的元素提供一个data-tab-url属性，其值等于组件的foo属性。

Answer 2

感谢的回答是正确的，但是；

进一步了解：

您不能将 mustache 语法用于属性绑定。 仅使用 mustache {{}} dom 元素的内容，即。

 <div>{{someValue}}</div> (THIS IS WRONG)

要绑定任何属性，包括模板道具任何其他属性，例如“src”或“data-tab-url”，您可以使用“v-bind:attr”或“:attr”速记，即。

 <div v-bind:src="someDataVariable"></div>

或者

<div v-bind:some-prop="someMethod()"></div>

您可以使用组件或 Vue 应用程序的任何成员（数据、方法、计算等），而无需“this”。

Answer 3

要在 html 中呈现任何组件实例属性（道具、数据、计算...），您必须：

使用v-bind:或简写: like :foo="someFoo"将其绑定到属性
在 mustache 语法中使用它{{someFoo}}
将其用作指令值v-show="isShown"或v-model="username" ，指令总是以v-为前缀

对于事件，它们的编写方式类似于v-on:eventName或@eventName ，它们可以运行内联语句@click="count++"或方法@click="increment"知道increment是在methods选项中定义的函数

VueJS 使用 prop 作为数据属性值

问题描述

3 个解决方案

解决方案1
22 已采纳 2017-04-05 16:42:05

解决方案2
8 2020-01-10 21:22:10

解决方案3
0 2021-06-28 16:34:46

VueJS 使用 prop 作为数据属性值

问题描述

3 个解决方案

解决方案1 22 已采纳 2017-04-05 16:42:05

解决方案2 8 2020-01-10 21:22:10

解决方案3 0 2021-06-28 16:34:46

解决方案1
22 已采纳 2017-04-05 16:42:05

解决方案2
8 2020-01-10 21:22:10

解决方案3
0 2021-06-28 16:34:46