[vue]数据来源

1.组件data函数return的数据

作用域是组件本身

可以在模板template及计算属性computed和方法methods中使用

2.父传子，props数据

来自父级；可以是写死的，或者是来自父级的动态数据，这时可以使用v-bind来绑定props的值
可以在模板template及计算属性computed和方法methods中使用
如果要直接从父组件向子组件传递数字、布尔值、数组、对象，而且不使用v-bind，传递的仅仅是字符串
单向数据流
- Vue 2.x 通过props传递数据是单向的, 意味着父组件数据变化时才会传递给子组件, 但是反过来不行(Vue1.x 提供了.sync修饰符来支持双向绑定)
- 之所以这样设计, 目的是尽可能将父子组件解耦，避免子组件无意中修改了父组件的状态
业务中经常会遇到两种需要改变prop的情况
- 1.父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改
  - 组件中声明了数据count，它在组件初始化时会获取来自父组件的initCount，之后就与之无关了，只用维护count，这样就可以避免直接操作initCount
- 2.prop作为需要被转变的原始值传入
  - 通过用计算属性来达到目的
  - S传递宽度要带单位(px)，但是每次都写太麻烦，而且数值计算一般是不带单位的，所以统一在组件内使用计算属性就可以了
注意，在JavaScript中对象和数组是引用类型，指向同一个内存空间，所以props是对象和数组时，在子组件内改变时会影响父组件的
数据深拷贝可以解决引用类型父子相互影响的问题
- 深拷贝就是完完整整的将一个对象从内存中拷贝一份出来。所以无论用什么办法，必然绕不开开辟一块新的内存空间。
数据验证
- props选项可以是一个数组，但是当需要对prop进行验证时，就需要对象写法
- 当你的组件需要提供给别人使用时，推荐都进行数据验证

3.子传父，子组件用$emit触发事件，父组件用$on来监听该事件

原理 dispatchEvent 与 addEventListener；观察者模式常用到的方法
用事件抛出一个特定的值: $emit的第二个参数，父组件监听这个事件时，我们可以通过$event访问到被抛出的这个值(或者这个值将会作为事件处理函数的第一个参数传入)
使用v-model可以用来创建自定义的表单输入组件

4.Vue.js 1.x 版本 $dispatch()，向上级派发事件；父级(一级或多级)都可以在Vue实例的events选项内接收

 var myComChild = {
        template: '<div><button @click="clickHandler">click</button></div>',
        data () {
            return {
            }
        },
        methods: {
            clickHandler () {
                this.$dispatch('d-event', 'hello');
            }
        }
    };
    var myCom = {
        template: '<div><my-com-child></my-com-child></div>',
        data () {
            return {
            }
        },
        created () {
            this.$on('d-event', (data) => {
                // do something
                console.log('1' + data); // 第一次接收到后停止冒泡
                return true; // 返回true可以继续冒泡, 使得更高一级的父组件也能接收到该事件
            });
        },
        components: {
            myComChild,
        }
    };
    var vm = new Vue({
        el: '#app',
        data () {
            return {
            }
        },
        created () {
            this.$on('d-event', (data) => {
                // do something
                console.log('2' + data);
            });
        },
        components: {
            myCom,
        },
        methods: {
        },
        // events: {
        //  'd-event': function(msg) {
        //      console.log(msg);
        //  }
        // }
    });

5.Vue.js 1.x版本$broadcast()，由上级向下级广播事件；用法与$dispatch()一致，只是方向相反

6.使用一个空的Vue实例作为中央事件总线(bus) - 中介者模式

由于Vue.js 1.x版本中的$dispatch() 与 $broadcast() ，基于组件树结构的事件流方式，让人难以理解，并且在组件结构扩展的过程中会变得越来越脆弱，并且不能解决兄弟组件通信的问题
通过bus把组件的事件发布出去, 同时其他组件会接收到来自bus的事件，进而在相应的事件回调中完成自己的业务逻辑
这种方法巧妙而轻量地实现了任何组件间的通信, 包括父子、兄弟、跨级，而且Vue 1.x 和 Vue 2.x都适用

如果深入适用，可以扩展bus实例，给它添加data、method、computed等选项，这些都是可以公用的

在业务中，尤其是协同开发时非常有用，因为经常需要共享一些通用的信息，比如用户登录的昵称、性别、邮箱等，还有用户的授权token等
只需在初始化时让bus获取一次，任何时间、任何组件就可以从中直接使用了，在单页面富应用(SPA)中会很实用

// eventHub, 注册在组件树的根 Vue 实例中, 通过 this.$root.eventHub.$emit 与 this.$root.eventHub.$on来使用
// 非组件中的事件总线bus使用方式
var bus = new Vue();
var comA = {
    template: '<button @click="clickHandler">传递事件到中央事件总线</button>',
    methods: {
        clickHandler () {
            bus.$emit('bus-event', '来自组件comA');
        }
    }
};
new Vue({
    el: '#app',
    data () {
        return {
            message: ''
        }
    },
    components: {
        comA,
    },
    mounted () {
        var _this = this;
        bus.$on('bus-event', function (msg) {
            console.log(msg);
            _this.message = msg;
        })
    }
});

7.父链 this.$parent

在子组件中，使用this.$parent可以直接访问该组件的父实例或组件, 父组件也可以通过this.$children访问它所有的子组件，而且可以递归向上或向下无限访问，直到根实例或最内层的组件
尽管Vue允许这样的操作, 但在业务中，子组件应该尽可能地避免依赖父组件的数据(自己复制一个)，更不应该去主动修改它的数据，因为这样使得父子组件紧耦合，只看父组件很难理解父组件的状态，因为它可能被任意组件修改，
理想情况下，只有组件自己能修改它的状态

父子组件最好还是通过props和$emit来通信

var comA = {
            template: '<div><button @click="clickHandler">点击修改父元素数据</button></div>',
            methods: {
                clickHandler () {
                    // do something
                    // 访问到父链后, 可以做任何操作, 比如直接修改父组件数据
                    this.$parent.message = '来自组件com-a的内容';
                },
            }
        };
        new Vue({
            el: '#app',
            data () {
                return {
                    message: ''
                }
            },
            components: {
                comA,
            }
        });

8.子组件索引

$ref只在组件渲染完成后才填充，并且它是非响应式的，它仅仅作为一个直接访问子组件的应急方案，应当避免在模板或计算属性中使用$refs(非响应式的)

<div id="app">
        <button @click="clickHandler">通过ref获取子组件实例</button>
        <p ref="p">hello</p>
        <com-a ref="comA"></com-a>
    </div>
    <script src="vue-dev.js"></script>
    <script>
        // 子组件索引
        // 当子组件较多时, 通过this.$children来一一遍历出我们需要的一个组件实例是件困难的事
        // 尤其是组件动态渲染时, 它们的序列是不固定的
        // Vue提供了子组件索引的方法, 用特殊的属性ref来为子组件指定一个索引名称
        var comA = {
            data () {
                return {
                    message: '子组件的数据'
                }
            },
            template: '<div><span>this is child component</span></div>',
        };
        new Vue({
            el: '#app',
            data () {
                return {
                }
            },
            components: {
                comA,
            },
            methods: {
                clickHandler () {
                    // 通过$refs来访问指定的实例
                    var msg = this.$refs.comA.message;
                    console.log(msg);
                    
                    // 与Vue 1.x不同的是, Vue 2.x 将v-el和v-ref合并为了 ref，Vue会去自动判断是普通标签还是组件
                    console.log(this.$refs.comA); // VueComponent 对象
                    console.log(this.$refs.p); // dom 元素 p元素
                }
            }
        })
    </script>

9.slot

在子组件内使用特殊的<slot>元素就可以为这个子组件开启一个slot(插槽)，在父组件模板里，插入在子组件标签内的所有内容将替代子组件的<slot>标签及它的内容(如果父组件没有插入内容，子组件<slot>标签里的内容将作为默认出现
单个slot

具名slot；父组件中使用slot特性，匹配子组件中使用了name特性的<slot>；父组件中没有使用slot特性的元素与内容将出现在子组件中没有使用name特性的默认slot中

<div id="app">
    <my-com>
        <h2 slot="header">标题</h2>
        <p>正文内容</p>
        <div slot="footer">底部信息</div>
    </my-com>
</div>
<!-- <script src="libs/vue-v1.0.28/vue.js"></script> -->
<script src="libs/vue-dev.js"></script>
<script>
    var myCom = {
        template: '\
        <div>\
            <slot name="header"></slot>\
            <slot></slot>\
            <slot name="footer"></slot>\
        </div>',
    };
    new Vue({
        el: '#app',
        data () {
            return {
            }
        },
        components: {
            myCom,
        },
    });
</script>

10.作用域插槽

作用域插槽是一种特殊的slot，使用一个可以复用的模板替换已渲染的元素
父组件使用了<template>元素，而且拥有一个scope="props"的特性，这里的props只是一个临时变量，就像v-for="item in items"里面的item一样。template可以通过临时变量props来访问来自子组件插槽的数据

作用域插槽的使用场景就是既可以复用子组件的slot，又可以使slot内容不一致

<div id="app">
    <my-com>
        <template scope="props">
            <p>来自父组件的内容</p>
            <p>{{ props.msg }}</p>
        </template>
    </my-com>
</div>
<script src="libs/vue-dev.js"></script>
<script>
    var myCom = {
        template: '<div class="container">\
            <slot msg="来自子组件的内容"></slot>\
            </div>'
    };
    new Vue({
        el: '#app',
        data () {
            return {
            }
        },
        components: {
            myCom,
        }
    })
</script>

posted @ 2019-10-26 00:18 rencoo 阅读(710) 评论(0) 编辑收藏举报

刷新页面返回顶部

rencoo

-人生不能像做菜，把所有的料都準備好了才下鍋-