- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="utf-8" />
- <title>
- </title>
- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
- </script>
- </head>
- <body>
- <div id="app1">
- <com-a>
- </com-a>
- <com-b>
- </com-b>
- <com-c>
- </com-c>
- </div>
- </body>
- <script>
- var A = {
- template: ` < div > <span > 我是组件A < /span> -->{{a}}
- <input type ="button" value ="把 A 数据传给 C">
- </div > `,
- data() {
- return {
- a: '我是 a 数据'
- }
- }
- };
- var B = {
- template: ` < div > <span > 我是组件B < /span> -->{{b}}
- <input type ="button" value ="把 B 数据传给 C">
- </div > `,
- data() {
- return {
- b: '我是 b 数据'
- }
- }
- };
- var C = {
- template: ` < div > <span > 我是组件C < /span> -->{{c}}
- <input type ="button" value ="把 C 数据传给 A">
- </div > `,
- data() {
- return {
- c: '我是 c 数据'
- }
- }
- };
- var App = new Vue({
- el: "#app1",
- data: {
- a: '我是父组件的数据'
- },
- /*// 子组件, 利用 props 进行数据传递:*/
- components: {
- 'com-a': A,
- 'com-b': B,
- 'com-c': C
- }
- });
- </script>
- </HTML>
- 案例基础页面: 展示结果:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8" />
- <title>
- </title>
- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
- </script>
- </head>
- <body>
- <div id="app1">
- <com-a>
- </com-a>
- <com-b>
- </com-b>
- <com-c>
- </com-c>
- </div>
- </body>
- <script>
- /* 全局的 */
- var vm = new Vue();
- var A = {
- template: ` < div > <span > 我是组件A < /span> -->{{a}}
- <input type ="button" value ="把 A 数据传给 B" @click="send">
- </div > `,
- data() {
- return {
- a: '我是 a 数据'
- }
- },
- methods: {
- send() {
- vm.$emit('a-msg', this.a)
- }
- }
- };
- var B = {
- template: ` < div > <span > 我是组件B < /span> -->{{b}}
- <input type ="button" value ="把 B 数据传给 C">
- </div > `,
- mounted() {
- vm.$on('a-msg',
- function(a) {
- alert(a);
- this.b = a;
- /* 将 this 绑定给当前函数, 引用当前函数 */
- }.bind(this));
- },
- data() {
- return {
- b: '我是 b 数据'
- }
- }
- };
- var C = {
- template: ` < div > <span > 我是组件C < /span> -->{{c}}
- <input type ="button" value ="把 C 数据传给 A">
- </div > `,
- data() {
- return {
- c: '我是 c 数据'
- }
- }
- };
- var App = new Vue({
- el: "#app1",
- data: {
- a: '我是父组件的数据'
- },
- /*// 子组件, 利用 props 进行数据传递:*/
- components: {
- 'com-a': A,
- 'com-b': B,
- 'com-c': C
- }
- });
- </script>
- </HTML>
之前结果:
传递之后的值:
来源: http://www.bubuko.com/infodetail-2943356.html