VueJS 使用 prop 作为数据属性值答案

【问题标题】：VueJS Use prop as data-attribute valueVueJS 使用 prop 作为数据属性值
【发布时间】：2017-08-31 09:38:53
【问题描述】：

我真的在以下情况下苦苦挣扎：

一些索引页面：

<!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 安装下使用 babel 和 webpack。

场景是这样的：

当我单击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.* 曾经有一种方法。使用三个方括号：{{{ this.foo }}}，但现在不推荐使用它，取而代之的是 v-html，我不能在我的示例中使用它。

【问题讨论】：

如果您在开发模式下使用 Vue，您应该会在浏览器控制台中看到一些警告。你不应该在 Vue 实例中使用道具 - 所以在 new Vue({...}) 中。在这里，您在 props 和 data 中声明 foo 和 bar，因此存在冲突。您应该在 Vue 实例中使用数据并将数据用作函数（因为您必须为组件 vuejs.org/v2/api/#data 中的数据声明函数，请参阅限制。所以在任何地方都这样做，以免有一天感到惊讶）：data: function() { return { foo: '', bar: '' } }
在 app.js 中删除 props: [ 'foo', 'bar' ], 应该可以完成这项工作。
感谢您的提示。实际上，我只有props，而主Vue中根本没有data
好的，现在一切都好了吗？一切都按预期工作？（我以为你还有其他问题……如果不是这样的话，很抱歉……）
我确实对 VueJS 和 Jquery 有一个巨大的理解问题，它们一起玩得很好。 VueJS 总是比 Jquery 落后一步。

标签： javascript webpack ecmascript-6 vue.js vuejs2

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

thanksd的回答是对的但是；

为了进一步了解：

您不能使用 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”。

【讨论】：

【解决方案3】：

要在 html 中呈现任何组件实例属性（prop、data、computed ...），您必须：

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

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

【讨论】：