在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue局部組件的問題

vue局部組件的問題

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>

<!-- TODO: 用全局組件方式寫就沒問題，用局部組件的方式就出現(xiàn)這個問題了 -->
<div id="app">
    <Apptext
        v-for="item in list"
        :eatList="item"
        v-bind:key="item.id"
    ></Apptext>
</div>
<script>
  
    var app = new Vue({
        el: '#app', 
        components:{
            Apptext:appText
        },
        data: {
            list:[
                { id: 0, text: '蔬菜' },
                { id: 1, text: '奶酪' },
                { id: 2, text: '隨便其它什么人吃的東西' }
            ]
        },
    })
    var appText = {
        props:['eatList'],
        template: '<li>{{ eatList.text }}</li>'
    }
</script>

</body>
</html>

最近初學(xué)vue，看官方文檔的一個例子自己用局部組件改寫的嗎，但是瀏覽器總是會報錯，而用全局組件就沒問題

回答
編輯回答
哚蕾咪

圖片描述

注冊駝峰 引用小寫短橫線

2017年9月24日 22:59
編輯回答
朕略傻

appText是局部注冊的沒錯，但是Apptext這個是什么，沒有說明哦

2017年7月25日 19:20
編輯回答
毀憶

Emmmm，這個是var的變量提升造成的，因為你把appText對象的賦值放在了Vue實例化的后面。

實際上是相當(dāng)于這樣的：

var appText = undefined

var app = new Vue({
  el: '#app',
  components: {
    Apptext: appText // 這個時候appText是undefined的
  },
  data: {
    list:[
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '隨便其它什么人吃的東西' }
    ]
  },
})

appText = {
  props:['eatList'],
  template: '<li>{{ eatList.text }}</li>'
}

改成 把appText的賦值放在new Vue之前就可以了。

PS：:eatList="item"　需要寫成 :eat-list="item"

2017年9月13日 17:20
編輯回答
疚幼

你這樣寫明顯是組件會報錯啊，appText這個應(yīng)該是apptext

2017年5月4日 15:57
編輯回答
硬扛

組件注冊的步驟是對的,錯在了appText這個變量上,當(dāng)你使用這個變量的時候它的值是undefined,原因是你在使用前沒有定義。
補(bǔ)充一下,為子組件傳值時要使用kebab-case(短橫線)的命名模式,而不是PascalCase(駝峰命名)

2018年8月6日 13:31