VueJS 使用 prop 作为数据属性值
Posted
技术标签:
【中文标题】VueJS 使用 prop 作为数据属性值【英文标题】：VueJS Use prop as data-attribute value 【发布时间】：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 落后一步。
【参考方案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 选项中定义的函数
【讨论】：
以上是关于VueJS 使用 prop 作为数据属性值的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Vue 中以 Typescript 语法定义使用 prop 作为其初始值的本地数据属性？