vue.js - 如何将数据传递给 vue.js 中的组件?
问题描述
我有这个
<template id="vButton">
<button v-bind:title="name">{{name}}</button>
</template>
<div id="app">
<ti-button></ti-button>
</div>
js
Vue.component('ti-button', {
props: ['name'],
template: '#vButton'
});
var vm2 = new Vue({
el: '#app',
data: {
name : 'hi'
}
});
我希望按钮具有 innerText 和 title 属性来表示“嗨”。但事实并非如此。有谁知道为什么?
参考:https ://vuejs.org/v2/guide/components.html
谢谢
解决方案
Vue.component('ti-button', {
props: ['name'],
template: '#vButton'
});
var vm2 = new Vue({
el: '#app',
data: {
name: 'hi'
}
});
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script type="text/x-template" id="vButton">
<div>
<button>{{name}}</button>
<button>{{$root.name}}</button>
</div>
</script>
<div id="app">
<ti-button name="first_button"></ti-button>
</div>
推荐阅读
- c++ - 在 C++ 中使用 0 初始化 2d c-array 不正确
- wordpress - 如何在自定义 WordPress 主题中生成标题图像替代文本?
- android - 如何为底部导航选项卡使用喷气背包导航组件/导航图?
- python - 如何有效地向前/向后一半填充数据帧中的空白?
- javascript - 在不知道项目名称的情况下循环遍历 javascript 对象
- python - 如何在 Python 中读取 txt 文件的特定部分?
- javascript - 未定义的属性“播放”
- javascript - 不能同时使用 DRAGGABLE、RESIZEABLE 和 SELECTABLE
- c# - 如何在 gridview C# .net 中以编程方式添加控制单元?
- node.js - Keycloak 策略执行器仅承载客户端