【发布时间】：2021-11-02 13:13:15
【问题描述】：
我使用vue-cli 制作了这个。我有一个名为InputField 的组件，我将组件渲染并安装到#app。我知道它会将组件注入应用程序，但我怎样才能在index.html 中获取“默认”值并在InputField.vue 中访问它？我尝试添加props: "default"，但默认值未定义。
想法是从html中的组件获取默认值，并在组件挂载时将其保存到数据中的values。
我添加了以下...
...到我的html，但似乎它在vue-cli 中不起作用？
我还在我的模板中添加了default="def"，如下所示：
<input default="def" v-model="values" name="my-input" />
但是当我在js 中引用"default" 时，它是未定义的。
InputField.vue
<template>
<div >
<input default="def" v-model="valuess" name="my-input" />
<input
v-model="message"
type="text">
<h2 class="message">{{ message }}</h2>
</div>
</template>
<script>
module.exports={
name:'InputField',
props:["default"],
mounted(){
console.log(this.default);
this.valuess=this.default;
},
updated(){
if(this.valuess===this.default){
return this.$emit('dirty-field',false);
}
this.$emit('dirty-field',true);
},
data: function () {
return {
valuess: '',
message:'heelo',
}
}
}
</script>
index.html
<div id="app">
<InputField default="My default text"></InputField>
</div>
main.js
new Vue({
render: h => h(InputField),
}).$mount('#app');
【问题讨论】：
-
你不能做你想做的事。索引中的
<InputField与您在应用程序中拥有的组件层次结构无关。它只是在应用程序初始化时被丢弃。如果您需要传递初始数据，请通过已知元素上的window或data属性（可能是<div id="app">） -
@EstusFlask 你的意思是我必须在 InputField.vue 中传递数据吗？我添加了
<input default="def" v-model="valuess" name="my-input" />，但默认仍未定义？我应该使用 v-bind 吗？ -
您需要从外部将默认数据传递给您的应用程序。同样，
window或其他。不是通过 InputField 道具。input没有default属性，所以<input default="def"不应该做任何事情。 -
@EstusFlask 谢谢我如何通过数据传递默认属性？是否只能在 vue cli 中向#app 注入组件？
-
我的意思不是 Vue
data，而是确切的数据属性，<div id="app" data-input-default="...">，并从appEl.dataset读取它
标签： javascript vue.js vue-component vue-cli