如何将html中父组件的prop传递给组件vue

Posted 2023-02-23

【中文标题】如何将html中父组件的prop传递给组件vue

【英文标题】：How to pass prop from parent component in html to component vue

【发布时间】：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>

ma​​in.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 读取它

【参考方案1】：

尝试使用:default 传递这样的默认道具：

<InputField :default="My default text"></InputField>

【讨论】：

你的意思是 v-bind 吗？

我尝试添加 v-bind:defaults="this.default" 但仍然未定义

v-bind:defaults 或 v-bind:default ??

绑定导致My default text被视为JS表达式，这不是一个有效的。