注意 Vue模板只能有一个对象，要想用多个对象时用div包裹
一、父组件->子组件 通过props
1、子组件：
声明：proprs =[‘xx’]，xx是在父组件中引用子组件，子组件的属性(template)
引用：{{xx}}
2、父组件
声明数据：oo
父组件template中引用子组件，属性的值为oo
记忆：父->子 传值，父要有值
a、传递字符串
<!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> </head> <body> <div id="app"> <!-- <button>{{msg}}</button> --> </div> <script src="./js/vue.js"></script> <script> // Vue(父)->App(子) //1. 声明子组件 let App = { data(){ return { text:"咬我", } }, // b.使用声明的变量 template: ` <div> <p>{{text}}</p> <h4>{{abc}}</h4> </div> `, // a.声明props props:['abc'], } new Vue({ el: "#app", data(){ // c.声明值 return { msg: "点我", } }, // 若 Vue对象有template，则template优先级高 // 3.引用子组件 // d.在父组件中声明，子组件的属性和值 template: ` <div> <button>{{msg}}</button> <App :abc="msg"></App> </div> `, // 2.挂载子组件 components:{ App, } }) </script> </body> </html>
b、传递对象
<!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> </head> <body> <div id="app"> </div> <script src="./js/vue.js"></script> <script> let App = { data(){ return { msg: "Vue" } }, // 2. template: ` <p>{{mpost.title}}</p> `, // 1. props: ['mpost'] } new Vue({ el: "#app", data(){ return { // 3 post: { id: 1, title: 'My Journey with Vue' } } }, template: ` <div> <App :mpost="post"></App> </div>`, components:{ App, }, }) </script> </body> </html>
或
<!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> </head> <body> <div id="app"> </div> <script src="./js/vue.js"></script> <script> let App = { data(){ return { msg: "Vue" } }, // 2. template: ` <p>{{id}}</p> `, // 1. props: ['id', "title"] } new Vue({ el: "#app", data(){ return { // 3 post: { id: 1, title: 'My Journey with Vue' } } }, template: ` <div> <App :id="post.id" :title="post.title"></App> </div>`, components:{ App, }, }) </script> </body> </html>
c、传递数组
<!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> </head> <body> <div id="app"> <button>{{text}}</button> <!-- 3.声明属性，属性名和子组件中的声明的props变量名一致 --> <!-- 4.传值，父组件的数据 --> <App :person="PersonArr" /> </div> <script src="./js/vue.js"></script> <script> let App = { data(){ return { } }, // 2.使用变量 template: ` <div> <p>{{person}}</p> <ul> <li v-for="per in person"> <span>姓名：{{per.name}}</span> <span>年龄：{{per.age}}</span> </li> </ul> </div> `, // 1.在props中声明变量 props: ['person'] } new Vue({ el: "#app", data(){ return { 'text':"点我", PersonArr: [ {'name': 'tom', 'age': 24}, {'name': 'alex', 'age': 34} ], } }, components:{ App, }, }) </script> </body> </html>
二、子组件到父组件
1、子组件
触发事件
this.emit(父组件的自定义事件及@后面的名字, 传递值)，父组件自定义的地方：子组件引用的地方
2、父组件
在父组件引用子组件的地方，自定义事件的函数接收值
注意：变量名，尤其时自定义监听方法的名称
<!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> </head> <body> <div id="app"> <p>"数值":{{msg}}</p> <App @clickfun="foo">{{msg}}</App> </div> <script src="./js/vue.js"></script> <script> // 触发 let App = { data(){ return { id: 1, } }, template:` <div> <button @click="clickHandler">{{id}}</button> </div> `, methods:{ clickHandler(){ this.id ++ ; this.$emit('clickfun', this.id) } } } // 接收 new Vue({ el: "#app", data(){ return { msg: "1", } }, methods:{ foo(val){ alert(val); this.msg = val; } }, components:{ App, } }) </script> </body> </html>
other
<!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> </head> <body> <div id="app"> <p>数值：{{msg}}</p> <my-div @clickfun="foo"></my-div> </div> <script src="./js/vue.js"></script> <script> var bus = new Vue() // 触发 Vue.component('my-div', { data(){ return { id: 1, } }, template:` <div> <button @click="clickHandler">{{id}}</button> </div> `, methods:{ clickHandler(){ this.id ++ ; this.$emit('clickfun') } } // template: `<button>点击</button>`, }) // 接收 var app = new Vue({ el: "#app", data(){ return { msg: "点我", text: "什么时候能交到女朋友" } }, methods:{ foo(){ alert(1); } }, }) </script> </body> </html>
三、平行组件传值(包含父组件->子组件 和 子组件->父组件）
注意：
1、声明事件：
$on(自定义事件名称, 接收数据的函数)
2、触发事件
$(emit)(声明事件的名称，传递的数据)
3、前提
两个方法必须绑定在同一实例化对象(bus)
<!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> </head> <body> <div id="app"> <p>{{newmsg}}</p> <App /> </div> <script src="./js/vue.js"></script> <script> let bus = new Vue() // 触发 let App = { data(){ return { text: "点我", msg: "Vue好难" } }, template: `<div> <button @click="clickHandler">传递</button> </div>`, methods:{ clickHandler(){ bus.$emit('testData', this.msg) } } } // 接收 new Vue({ el: "#app", data(){ return { newmsg: "avc", } }, components:{ App }, created(){ bus.$on('testData', (val)=>{ alert(val) this.newmsg = val; }); }, }) </script> </body> </html>
另一个例子
<!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> </head> <body> <div id="app"> <button @click="clickHandler">{{msg}}</button> <my-div></my-div> </div> <script src="./js/vue.js"></script> <script> var bus = new Vue() // 接收 Vue.component('my-div', { data(){ return { text: "dads" } }, template:` <div> <hr /> <p>{{text}}</p> </div> `, created(){ bus.$on('testData', (val)=>{ // console.log(val) this.text = val; }) }, // template: `<button>点击</button>`, }) // 触发 var app = new Vue({ el: "#app", data(){ return { msg: "点我", text: "什么时候能交到女朋友" } }, methods:{ clickHandler(){ bus.$emit('testData', this.text); } }, }) </script> </body> </html>