为什么两个具有不同 prop 名称的 Vue.js 相同组件给出不同的结果? [英] Why two Vue.js identical components with different prop names give different results?

问题描述

Codepen.io:https://codepen.io/xblack/pen/jXQeWv?editors=1010

HTML 部分:

<ul><child-one :one="mydata"></child-one><child-two :mydataTwo="mydata"></child-two>
<!-- 子一个模板--><script type="text/x-template" id="child-one"><ul>清单一<li v-for="item,i in one">{{i}} {{item.name}} {{item.username.name}} {{item.email}} </li><!-- 子二模板--><script type="text/x-template" id="child-two"><ul>列出两个<li v-for="item,i in mydataTwo">{{i}} {{item.name}} {{item.username.name}} {{item.email}} </li>

JS 部分:

Vue.component('child-one',{模板:'#child-one',道具:['一个']});Vue.component('child-two',{模板:'#child-two',道具:['mydataTwo']});让应用程序 = 新 Vue({el:'#app',数据:{欢迎:'你好世界'，我的数据:[]},方法:{获取数据API(){fetch("https://jsonplaceholder.typicode.com/users").then(r => r.json()).then((r) => {this.mydata = r;});}},安装:功能(){this.getdataApi();}});

输出:

 列表一0 Leanne Graham 真诚@april.biz1 Ervin Howell [e-mail]2 克莱门汀·鲍赫 [e-mail]3 帕特里夏·莱布萨克 [e-mail]4 切尔西·迪特里希 [e-mail]5 丹尼斯·舒利斯特夫人 [e-mail]6 Kurtis Weissnat [e-mail]7 Nicholas Runolfsdottir V [e-mail]8 Glenna Reichert [e-mail]9 Clementina DuBuque [e-mail]列出两个

解决方案

这是由于 props 使用的大小写:https://vuejs.org/v2/guide/components-props.html#Prop-Casing-camelCase-vs-烤肉串

如果您在组件声明中使用 mydataTwo 作为 prop，那么您将需要在模板中使用 v-bind:mydata-two，而不是 <代码>v-bind:mydataTwo.

而不是这样做:

你应该这样做:

参见概念验证示例:

Vue.component('child-one',{模板:'#child-one',道具:['一个']});Vue.component('child-two',{模板:'#child-two',道具:['mydataTwo']});让应用程序 = 新 Vue({el:'#app',数据:{欢迎:'你好世界'，我的数据:[]},方法:{获取数据API(){fetch("https://jsonplaceholder.typicode.com/users").then(r => r.json()).then((r) => {this.mydata = r;});}},安装:功能(){this.getdataApi();}});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="应用程序"><ul><child-one :one="mydata"></child-one><!-- 修复:使用 `mydata-two` 而不是 `mydataTwo` --><child-two :mydata-two="mydata"></child-two><!--/修复-->

<!-- 子一个模板--><script type="text/x-template" id="child-one"><ul>清单一<li v-for="item,i in one">{{i}} {{item.name}} {{item.username.name}} {{item.email}} </li><!-- 子二模板--><script type="text/x-template" id="child-two"><ul>列出两个<li v-for="item,i in mydataTwo">{{i}} {{item.name}} {{item.username.name}} {{item.email}} </li></script>

Codepen.io: https://codepen.io/xblack/pen/jXQeWv?editors=1010

HTML part:

<div id="app">  
  <ul>
    <child-one :one="mydata"></child-one>
    <child-two :mydataTwo="mydata"></child-two>
  </ul>
</div>

<!-- child one template -->
<script type="text/x-template" id="child-one"> 
    <ul>
      LIST ONE
      <li v-for="item,i in one"> {{i}} {{item.name}} {{item.username.name}} {{item.email}} </li>   
    </ul>
</script> 

<!-- child two template -->
<script type="text/x-template" id="child-two"> 
    <ul>
      LIST TWO
      <li v-for="item,i in mydataTwo"> {{i}} {{item.name}} {{item.username.name}} {{item.email}} </li>   
    </ul> 
</script> 

JS part:

Vue.component('child-one',{
  template:'#child-one',
  props:['one'] 
});

Vue.component('child-two',{
  template:'#child-two',
  props:['mydataTwo'] 
});

let app = new Vue({
  el:'#app',
  data:{
    welcome:'Hello World',
    mydata:[]
  },
  methods:{
    getdataApi(){
      fetch( "https://jsonplaceholder.typicode.com/users").then(r => r.json()).then( (r) => {
        this.mydata = r;
      }); 
    } 
  },
  mounted:function(){ 
    this.getdataApi();
  }
});

Output:

     LIST ONE
    0 Leanne Graham [e-mail]
    1 Ervin Howell [e-mail]
    2 Clementine Bauch [e-mail]
    3 Patricia Lebsack [e-mail]
    4 Chelsey Dietrich [e-mail]
    5 Mrs. Dennis Schulist [e-mail]
    6 Kurtis Weissnat [e-mail]
    7 Nicholas Runolfsdottir V [e-mail]
    8 Glenna Reichert [e-mail]
    9 Clementina DuBuque [e-mail] 
    LIST TWO 

解决方案

That's due to the casing used for props: https://vuejs.org/v2/guide/components-props.html#Prop-Casing-camelCase-vs-kebab-case

If you're using mydataTwo as the prop in the component declaration, then you will need to use v-bind:mydata-two in the template, not v-bind:mydataTwo.

Instead of doing this:

<child-two :mydataTwo="mydata"></child-two>

You should be doing this:

<child-two :mydata-two="mydata"></child-two>

See proof-of-concept example:

Vue.component('child-one',{
  template:'#child-one',
  props:['one'] 
});

Vue.component('child-two',{
  template:'#child-two',
  props:['mydataTwo'] 
});

let app = new Vue({
  el:'#app',
  data:{
    welcome:'Hello World',
    mydata:[]
  },
  methods:{
    getdataApi(){
      fetch( "https://jsonplaceholder.typicode.com/users").then(r => r.json()).then( (r) => {
        this.mydata = r;
      }); 
    } 
  },
  mounted:function(){ 
    this.getdataApi();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">  
  <ul>
    <child-one :one="mydata"></child-one>
    
    <!-- Fix: use `mydata-two` instead of `mydataTwo` -->
    <child-two :mydata-two="mydata"></child-two>
    <!-- /Fix -->
  </ul>
</div>

<!-- child one template -->
<script type="text/x-template" id="child-one"> 
    <ul>
      LIST ONE
      <li v-for="item,i in one"> {{i}} {{item.name}} {{item.username.name}} {{item.email}} </li>   
    </ul>
</script> 

<!-- child two template -->
<script type="text/x-template" id="child-two"> 
    <ul>
      LIST TWO
      <li v-for="item,i in mydataTwo"> {{i}} {{item.name}} {{item.username.name}} {{item.email}} </li>   
    </ul> 
</script>

这篇关于为什么两个具有不同 prop 名称的 Vue.js 相同组件给出不同的结果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！