Question

HTML将props传递给Vue标记，不存在任何值。即使我尝试打印出已挂载，已创建，未定义的内容，也已打印。

Vue在Django服务器上运行。因此，我更改了定界符并打印了应用程序，但没有打印出任何内容。

HTML代码

<radio-input :radio-content="personal"></radio-input>

Vue代码

radioInput = new Vue({
  props: ["radioContent"],
  template:
    '<label>\n' +
    ' <input type="radio" :name="name" :value="value" :v-model="v_model" :required="required">\n' +
    ' <span>${ radioContent }</span>\n' +
    '</label>\n',
  delimiters: ['${', '}'],
  el: 'radio-input',
  data: {
    name: 'A1_P1_S1_B0',
    value: 'personal',
    v_model: 'A1P1S1Q',
    required: true,
  }
});

预期结果是“ radioButton +'个人'文本”。但是不会打印“个人”文本

Answer 1

由于personal在父级数据中不是变量，尽管它是传递给<radio-input/>组件的静态值。

无需传递 binding colons :someProp 即可通过静态道具。当您使用它基本上是 v-bind:someProp 时，Vue组件将在其someProp中寻找 data 或尝试将其视为JavaScript表达式，例如Number或Boolean或Array，而不是要传递的静态文本。

将组件的HTML代码更改为：

<radio-input radio-content="personal"></radio-input>

-根据代码段和注释进行更新-： 好的！这里有几件事

props 是从父级传递到子级的东西（考虑到它是一种将父级->子级（不是Vue组件或纯HTML实例）进行通信的方式）。
为什么在这里不工作：您只有一个Vue实例 <radio-input/>是父类，因此在其上定义prop是毫无意义，因为没有父Vue可以通过。 Read Some More
在这种情况下，您只需删除prop和绑定值并直接从数据属性中使用personal文本如果您要的是value，就是您想要的。


    <html>
       <head>
       </head>
       <body>
          <radio-input></radio-input>
          <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
          <script>
             radioInput = new Vue({
               template: '<label>\n' +
                 ' <input type="radio" :name="name" :value="value" :v-model="v_model" :required="required">\n' +
                 ' <span>${ value }</span>\n' +
                 '</label>\n',
               delimiters: ['${', '}'],
               el: 'radio-input',
               data: {
                 name: 'A1_P1_S1_B0',
                 value: 'personal',
                 v_model: 'A1P1S1Q',
                 required: true,
               }
             });
          </script>
       </body>
    </html>

道具在Vue上未定义

1 个答案: