子组件获取父组件数据
<!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>父组件向子组件通讯</title> </head> <body> <div id="app"> <father></father> </div> <template id="father"> <!-- 模板中只能有一个根节点，否则会报错 --> <div> {{fatherData}} <!-- 这里有个坑， :fatherdata需要全部小写,因为解析的时候，会解析成小写 --> <son :fatherdata='fatherData'></son> <!-- 或者采用连接符，但props中需要写成驼峰形式 --> <!-- <son :father-data='fatherData'></son> --> </div> </template> <template id="son"> <div> {{sondata}} - {{fatherdata}} </div> </template> <script src="js/vue.js"></script> <script> let vm = new Vue({ el: '#app', components: { 'father': { template: '#father', data() { return { fatherData: '我是父组件数据', } }, components: { 'son': { template: '#son', data() { return { sondata: '我是子组件数据', } }, props: ['fatherdata'], // 连字符对应修改成驼峰 // props: ['fatherData'], } } }, } }) </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>子组件向父组件通讯</title> </head> <body> <div id="app"> <father></father> </div> <template id="father"> <div> {{fatherData}} - {{sonData}} <!-- 这里也需要小写 --> <son @getsondata='getSonData'></son> </div> </template> <template id="son"> <div> {{sonData}} </div> </template> <script src="js/vue.js"></script> <script> let vm = new Vue({ el: '#app', components: { 'father': { template: '#father', data() { return { fatherData: '我是父组件数据', sonData: '', } }, methods: { getSonData(value) { this.sonData = value; } }, components: { 'son': { template: '#son', data() { return { sonData: '我是子组件数据' } }, mounted() { // 通过this.$emit()发送数据 this.$emit('getsondata',this.sonData) } } } } } }); </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>兄弟组件的通讯</title> </head> <body> <div id="app"> <component1></component1> <component2></component2> </div> <template id="mylarge"> <div> {{mylarge}} - {{mysmall}} <button @click='largeTosmall'>将哥哥数据传给弟弟</button> </div> </template> <template id="mysmall"> <div> {{mysmall}} - {{mylarge}} <button @click='smallTolarge'>将弟弟数据传给哥哥</button> </div> </template> <script src="js/vue.js"></script> <script> // 借用一个空的vue对象，进行兄弟组件间的数据通讯 let event = new Vue({}); let vm = new Vue({ el: '#app', components: { 'component1': { template: '#mylarge', data() { return { mylarge: '我是哥哥的数据', mysmall: '' } }, mounted() { event.$on('getmysmalldata',value=> { this.mysmall = value; }) }, methods: { largeTosmall() { event.$emit('getmylargedata',this.mylarge); } } }, 'component2': { template: '#mysmall', data() { return { mysmall: '我是弟弟的数据', mylarge: '' } }, mounted() { event.$on('getmylargedata',value=> { this.mylarge = value; }) }, methods: { smallTolarge() { event.$emit('getmysmalldata',this.mysmall); } } } } }); </script> </body> </html>
运行结果：
--------
-------
未完，待续...