Vue组件之间的传值

Vue组件之间的传值

一、 父传子

定义一个子组件：
在div中放入组件占位符 在里面有冒号的是变量传递没有冒号的是常值传递

<!-- 父组件向子组件传值 -->
 <menu-item :title='ptitle' content='hello' cc='147' :flag='true' :pobj='obj'></menu-item>

Vue.component('menu-item', {
            props: ['title', 'content',
                'cc', 'flag', 'pobj'
            ],

            data: function() {
                return {
                    msg: '子组件本身的数据'
                }
            },
            template: '<div>{{msg + "----" + title + "-----" + content + cc+"----" + flag +"----" + pobj.age +"----" + pobj.name}}</div>'
        });

对于这个子组件的父组件就是VM ：

var vm = new Vue({
            el: '#app',
            data: {
                pmsg: '父组件中内容',
                ptitle: '动态绑定属性',
                obj: {
                    name: 'qy',
                    age: 18
                },
                fontSize: 10
            },
            methods: {
                handle: function(data) {
                    // 扩大字体大小
                    this.fontSize += data;
                }
            }
        });

在子组件中通过prop接收父组件传递过来的值，这样一来就可以实现父传子

二 、子传父

 <div id="app">
        <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
        <div :style='{fontSize: fontSize + "px"}'>{{fontSize}}</div>
        <!-- 在handle的参数不是data数据 是固定的$event参数获取子组件传递过来的值 -->
        <!-- 子组件向父组件传值 -->
        <hehe-item @change-text='handle($event)'></hehe-item>
    </div>

我们在定义一个子组件实现子传父

        // 子组件向父组件传值
        // - 子组件用$emit()触发事件
        // - $emit()  第一个参数为 自定义的事件名称
        // - 第二个参数为需要传递的数据
        // - 父组件用 v-on 监听子组件的事件

        Vue.component('hehe-item', {
            props: ['parr'],
            // 自己定义一个触发事件
            template: `
        <div>
          <button @click='$emit("change-text",5)'>扩大父组件中字体5大小</button>
          <button @click='$emit("change-text",1)'>扩大父组件中字体1大小</button>
        </div>
      `,
        });

在子组件通过 @click='$emit("父组件命名",传递的参数)' 方法传递参数
在父组件我们通过 @父组件命名='父组件自定义方法($event)'接收子组件的传递的参数
$event 是接收到的传值参数

三 兄弟组件

div代码：

    <div id="app">
        <div>父组件</div>
        <div>
            <button @click='handle'>销毁事件</button>
        </div>
        <test-tom></test-tom>
        <test-jerry></test-jerry>
    </div>

第一： 提供事件中心

var hub = new Vue();

第二：定义2个同级别的组件

组件A：

Vue.component('test-tom', {
            data: function() {
                return {
                    num: 1
                }
            },
            template: `
        <div>
          <div>TOM:{{num}}</div>
          <div>
            <button @click='handle'>点击加让jerry乘2</button>
          </div>
        </div>
      `,
            methods: {
                handle: function() {
                    hub.$emit('jerry-event', 2);
                }
            },
            mounted: function() {
                // 监听事件
                hub.$on('tom-event', (val) => {
                    this.num += val;
                });
            }
        });

组件B：

 Vue.component('test-jerry', {
            data: function() {
                return {
                    num: 1
                }
            },
            template: `
        <div>
          <div>MALI:{{num}}</div>
          <div>
            <button @click='handle'>点击加让tom加1</button>
          </div>
        </div>
      `,
            methods: {
                handle: function() {
                    // 触发兄弟组件的事件
                    hub.$emit('tom-event', 3);
                }
            },
            mounted: function() {
                // 监听事件
                hub.$on('jerry-event', (val) => {
                    this.num *= val;
                });
            }
        });

第三 给每个组件添加 触发兄弟组件的事件 和 监听自己组件的事件
以上有参考

第四 给每个组件添加销毁事件 优化一下

var vm = new Vue({
            el: '#app',
            data: {

            },
            methods: {
                // 点击过后就是销毁组件
                handle: function() {
                    hub.$off('tom-event');
                    hub.$off('jerry-event');
                }
            }
        });

显示出来界面：

vue传值最常见的大概就是这样 当然我们也可以用Vuex 进行状态集中管理