自定義的私有組件，不能訪問vm實例中的數據
1、父組件向子組件傳值
在使用私有組件的時候，通過屬性綁定的形式，把需要傳遞給子組件的數據，以屬性綁定的形式傳遞到私有組件中
<div id="app"> <!-- 1、在使用組件的時候，使用綁定命令，將所需要的VM實例數據綁定到私有組件中 --> <com1 v-bind:parentmsg="msg"></com1> </div> <script> var vm = new Vue({ el: '#app', data: { msg: '123 啊-父組件中的數據' }, methods: {}, components: { com1: { // 3、直接用插值表達式的形式直接使用 template: '<h1>這是子組件 --- {{parentmsg}}</h1>', // 2、需要先在props中定義一下上面綁定的數據，注意props是個數組，里面所有數據都是從VM實例中傳過來的 props: ['parentmsg'] } } }) </script>
私有組件中的數據是實例私有的，比如通過ajax請求回來的數據，數據是可讀可寫的，
props中的數據是VM實例傳遞過來的，只讀
2、父組件向子組件傳遞函數
<div id="app"> <!-- 1、使用的時候直接使用事件綁定機制 v-on簡寫就是@ 當自定義了一個事件屬性之后，子組件就能夠通過某些方式調用這個傳遞的方法 --> <com2 v-on:func="show"></com2> </div> <template id="templ"> <div> <h1>這是子組件</h1> <input type="button" value="觸發父組件傳遞過來的show方法" @click="myclick"> </div> </template> <script> var com2 = { template: '#templ', data() { return { sonmsg: { name: '小頭兒子', age: 6 } } }, methods: { myclick() { //在子組件的方法中使用傳遞過來的函數 // emit意思是觸發調用的意思,前面是函數名字，后面是參數 this.$emit('func', this.sonmsg) } }, } var vm = new Vue({ el: '#app', data: { hello:'傳遞的值', datafromSon: null }, methods: { show(data) { console.log('調用了父組件中的方法-----' + this.hello) } }, components: { com2 } })
1、使用的時候時間綁定v-on簡寫就是@
2、定義組件的時候直接在組件的方法中使用
3、最后在組件中使用定義的方法
其實本質就是，私有組件定義自己的函數，只不過在自己的函數中使用this.$emit('綁定的函數名',參數)調用父組件的函數，
3、子組件向父組件傳值
這種情況就是使用上述的情況達到效果，達到效果要使用到參數列表，通過參數列表的形式傳值
<!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="./lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <!-- 事件的綁定 --> <com1 @func="show"></com1> </div> <template id="temp"> <div> <h1>private component</h1> <input type="button" value="調用父組件函數傳值" @click="myclick"> </div> </template> <script> // 聲明子組件 var com1={ template:'#temp', data() { return { sonmsg:'兒子的消息' } }, methods:{ myclick(){ // 將子組件中的值通過this指針，傳遞給函數 this.$emit('func',this.sonmsg) } } } var vm = new Vue ({ el:'#app', data: { parent:null }, methods: { show(sonmsg){ // 函數中通過轉遞過來的值，將子組件中的值寫入父組件中 this.parent=sonmsg } }, components: { // 父組件注冊 com1 } }) </script> </body> </html>
注意數據的使用需要加上this指針
簡單的實現發表評論的功能
<!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="./lib/vue-2.4.0.js"></script> <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css"> </head> <body> <div id="app"> <cmt-box @func="loadComments"></cmt-box> <ul class="list-group"> <li class="list-group-item" v-for="item in list" :key="item.id"> <span class="badge">評論人:{{item.user}}</span> {{item.content}} </li> </ul> </div> <template id="temp"> <div> <div class="form-group"> <label>評論人：</label> <input type="text" class="form-control" v-model="user"> </div> <div class="form-group"> <label>評論內容：</label> <textarea class="form-control" v-model="content"></textarea> </div> <div class="form-group"> <input type="button" value="發表評論" class="btn btn-primary" @click="postComment"> </div> </div> </template> <script> var commentbox = { template: '#temp', data() { return { user: null, content: null, } }, methods: { click(){ alert('------------------------') }, postComment() { if(this.user===''||this.user===null){ alert('用戶名不能是空') return true } var comment = { id: Date.now(), user: this.user, content: this.content } var list = JSON.parse(localStorage.getItem('cmts') || '[]') list.unshift(comment) localStorage.setItem('cmts',JSON.stringify(list)) this.user = this.content = '' this.$emit('func') }, }, } var vm = new Vue({ el: '#app', data: { list: [] }, methods: { loadComments(){ var list= JSON.parse(localStorage.getItem('cmts')||'[]') this.list=list } }, created() { this.loadComments() }, components: { 'cmt-box': commentbox } }) </script> </body> </html>