Vue.js之组件及其易错点
生活随笔
收集整理的這篇文章主要介紹了
Vue.js之组件及其易错点
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
今天，在做一個關于vue的demo的時候，發現vue的組件寫法出現了錯誤，剛開始一直沒看出來，經過我的一番查閱，才發現了這個錯誤，希望大家能夠引以為戒，不要犯類似的錯誤！
錯誤源碼：
在組件里面的數據，我直接跟其他時候一樣，直接返回一個json對象，結果發現調試的時候，報如下錯誤：
它的意思是：data這個選項必須是一個函數！
接著，我把它改成了一個函數，如下：
調試后，發現還是報錯 ！
它提示我說：data函數必須返回一個對象！而我返回的卻是一個字符串！
于是，我改成了返回一個json對象：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="vue.js"></script> </head> <body> <div><p>{{mydata}}</p><myapp></myapp> </div> <template id="aaa"><h3>我是父組件vm的子組件myapp->{{msg}}</h3> </template> </body> <script>var vm = new Vue({el: 'div',data: {mydata: 'a'},components: {myapp: {data: function () {return {msg: 'woaini'}},template: '#aaa'}}});</script> </html>現在結果終于正確啦！
總結：
Vue組件里面放的數據必須是一個函數，并且也不能返回一個類似于字符串，或者return 1這樣的值，它必須要返回一個對象（通常來說是JSON對象）。
總結
以上是生活随笔為你收集整理的Vue.js之组件及其易错点的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： NeHe OpenGL教程 第二十一课：
- 下一篇： vue新建项目