自定义的私有组件，不能访问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>