vue 常用Api整理 4

1. 全局配置

全局配置在 Vue.config 下，需要在启动应用之前配置

    import Vue from 'vue';    Vue.config.silent = false;    new Vue({        ...    })

1. silent: true | false 取消Vue所有日志与警告
2. devtools: true | false 是否允许 vue-devtools 检查代码，开发版本默认为 true，生产版本默认为 false。生产版本设为 true 可以启用检查。
3. keyCodes: {f1: 112} 给 v-on 自定义键盘事件的键名修饰符
4. productionTip: true | false 显示或者阻止 vue 启动时的提示

2. 全局 API

1. Vue.extend({})

参数是一个组件的配置对象，结果是一个类，实例化这个类用来创建Vue组件

    const config = {       template: '<div>{{text}}</div>',       data() {          return {             text: 'this is text'          };       }    };    // 创建构造器    const Child = Vue.extend(config);    const child = new Child();    // 将实例挂在到元素上    child.$mount('#app');

2. Vue.set(traget, key, value)

设置对象的属性，如果是响应式的，确保创建后也是响应式的，目标对象不能是一个 Vue 实例或 Vue 实例的根数据对象。

    var vm=new Vue({        el:'#app',        data:{            // info 属性已存在            info:{                name:'小明';            }        }    });    // 给info添加一个性别属性    Vue.set(vm.info,'sex','男');

3. Vue.delete(target, key)

删除对象的属性，如果是响应式的，确保删除能触发更新视图

    var vm=new Vue({        el:'#app',        data:{            info:{                name:'小明';            }        }    });    // 删除 info 的 name 属性    Vue.delete(vm.info, 'name');

4. Vue.component(id, [definition])

注册或者获取全局组件

    // 注册组件，传入一个扩展过的构造器    Vue.component('my-component', Vue.extend({}))    // 注册组件，传入一个选项对象 (自动调用 Vue.extend)    Vue.component('my-component', {tempalte: '<div></div>', ...})    // 获取注册的组件 (始终返回构造器)    var MyComponent = Vue.component('my-component')

5. Vue.use(plugin)

安装 Vue 插件, 插件需要提供 install 方法

    Vue.use(Vuex);

3. 实例属性与方法

Vue 实例暴露了一些有用的实例属性与方法，他们在创建实例时，写在配置对象中，创建实例后可以通过
添加前缀 $ 后的属性名调用，以便与用户定义的属性区分， 例如： data、prop。

1. vm.$parent

父实例，如果当前实例有的话。

2. vm.$root

当前组件树的根 Vue 实例。

3. vm.$children

当前实例的直接子组件

4. vm.slots

访问被插槽分发的内容 （子组件中获得插入的内容）

5. vm.$refs

一个对象，持有已注册过 ref 的所有子组件。（父组件中对子组件设置）

6. vm.$attrs

包含了父作用域中不被认为 (且不预期为) props 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 props 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind=”$attrs” 传入内部组件 （子组件中调用，得到父组件传入的没有在 props 属性中声明的属性）

7. vm.$on(event, callback)

监听当前实例（调用 on()的对象）上的自定义事件。事件可以由vm.emit触发。回调函数会接收所有传入事件触发函数的额外参数。（是一个事件监听函数，可以监听同一个事件，做多个处理）

    vm.on('test', function (data) {})

8. vm.$emit(event, [..args])

触发当前实例上的事件，附加参数都会传给监听器回调

    vm.$emit('test', 'this is data');

更加详细的使用看 组件通信部分

9. vm.$once(event, callback)

与 vm.$on() 一致用法，监听一个自定义事件，但是只触发一次，在第一次触发之后移除监听器。

10. vm.$off([event, callback])

移除自定义事件监听器。

• 如果没有提供参数，则移除所有的事件监听器；

• 如果只提供了事件，则移除该事件所有的监听器；

• 如果同时提供了事件与回调，则只移除这个回调的监听器。

11. vm.$mount()

如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例；参数为一个 dom 或者一个选择器

    const component = new MyComponent().$mount('#app');

12. vm.$forceUpdate()

迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

13. vm.$nextTick(callback)

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。

14. vm.$destroy()

完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。触发 beforeDestroy 和 destroyed 的钩子。

4. 组件间通信

1. 父组件向子组件传递数据

组件实例的作用域是孤立的，这意味着不能在子组件的模板内直接引用父组件的数据，父组件的数据需要通过 prop 才能下发到子组件中，子组件要显式的使用 props 选项声明它预期的数据

    <!-- 父组件 -->    <template>    <div class="home-basic-container" >        <!-- 传递 ‘prop’ 给子组件 -->        <child :parentName="parentName"></child>        <!-- 将所有 data 中数据传递给子组件 -->        <child v-bind="$data"></child>        <!-- 将一组数据传递给子组件 -->        <child v-bind="{name: parentName, age: parentAge}"></child>    </div>    </template>    <!-- 子组件 -->    <template>    <div class="child-container">        <!-- 使用父组件传入的数据 -->       {{parentName}}    </div>    </template>    <script>    export default {        name: 'HomeBasic',        props: ['parentName'] // 显式的声明需要的数据    };    </script>

注：

• prop 是单向的，父组件的变化会传给子组件，但是子组件的变化不会改变父组件的数据
• 子组件收到的 prop 只能由父组件改变，子组件内部不允许改变 prop

对比 : 与 react 中父组件向子组件传递数据方式类似

2. 子组件向父组件传递信息

父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件，在事件回调中处理来自子组件的数据

子组件内部可以使用 this.$emit(event, [...args]) 来触发事件

    <!-- 父组件 -->    <child v-bind="$data" v-on:changeName="handleNameChange"></child>

    // 父组件    data() {        return {            parentName: 'parent name',            parentAge: 80        };    },    methods: {        handleNameChange(newName) {            this.parentName = newName;        }    },

    <!-- 子组件 -->    <input @input="handleChange" />

    methods: {      handleChange(e) {         const newName = e.target.value;         this.$emit('changeName', newName);      }    },

对比：

• react 中 子组件向父组件传递数据会：在父组件中定义一个函数，用来更新状态；将这个函数像普通 prop 一样传入子组件中；子组件调用这个函数并传入参数；父组件进行相应的数据更新；
• 实测，vue 中这样的操作也可以达到目的，但是官方提供了另外一种自定义事件的方式，如上；

3. 父组件中直接使用子组件

可以通过在子组件上添加 ref 属性，然后在需要使用的地方通过 ref 属性名称获取到子组件的实例

    <!-- 父组件中 -->    <Child ref="child"></Child>

    method: {        some() {            this.$refs.child.doSomeThing();        }    }

对比：react 中有同样的方式。

4. 子组件中直接使用父组件

在子组件中 直接通过 this.$parent 就可以获得父组件的实例

    method: {        some() {            console.log(this.$parent);        }    }

5. 非父子组件间通信

1. 如果两个组件有同一个父组件（不推荐的方法）

    <!-- 父组件 -->    <child v-bind="$data" ref="child"></child>    <Test v-on:changeName="handleChange"></Test>

    // 父组件中的函数用来调用其中一个子组件的方法    handleChange(newName) {        this.$refs.child.changeName(newName);    }    // 触发事件的子组件 Test    handleChange() {        this.$emit('changeName', 'this is newName');    }    // 接收事件的子组件 Child    changeName(newName) {        this.showName = newName;     }

如果两个组件间没有直接的联系（推荐）

    // 在两个组件外制作一个事件总线    const bus = new Vue();    // 组件 A 中触发事件    bus.$emit('event', [...args]);    // 组件 B 中监听事件（要在钩子函数中）    bus.$on('event', function () {});

5. 使用插槽分发内容

为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板，这个过程被称为内容分发，Vue 中使用 <slot> 元素作为原始内容的插槽

父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件的作用域内编译

1. 单个插槽

子组件中包含一个 <slot> 插口，表示在父组件中添加的内容片段，要在子组件中显示的位置，子组件的 <slot> 标签中可以内容，表示在父组件传入片段为空时的显示内容

    <div>      <h2>我是子组件的标题</h2>      <slot>        只有在没有要分发的内容时才会显示。      </slot>    </div>

    <!-- 父组件 -->    <div>      <h1>我是父组件的标题</h1>      <my-component>        <p>这是一些初始内容</p>        <p>这是更多的初始内容</p>      </my-component>    </div>

    <!-- 渲染结果 -->    <div>      <h1>我是父组件的标题</h1>      <div>        <h2>我是子组件的标题</h2>        <p>这是一些初始内容</p>        <p>这是更多的初始内容</p>      </div>    </div>

2. 具名插槽

具名插槽可以 用来分配父组件传入的内容在子组件中的位置， <slot> 可以有一个 name 的特性，用来标记插槽的名字，父组件中传入的片段可以有一个 slot 的特性，值为具名插槽的名字，片段会插入到对应的具名插槽中。

    <!-- 父组件 -->    <Test v-on:changeName="handleChange">        <p slot="a">parentName is {{parentName}}</p>        <p>parentName is {{parentName}}</p>        <p slot="b">parentName is {{parentName}}</p>    </Test>    <!-- 子组件 -->    <slot name="a">      名为 a 的具名插槽    </slot>    <button @click="handleChange">Button</button>    <slot>      普通插槽，父组件中没有 slot 特性的片段会显示在这里      如果父组件中的 slot 指向的具名插槽不存在，则不显示    </slot>

3. 作用域插槽

作用域插槽允许在父组件中的 插入片段中使用来自子组件对应插槽的数据

    <!-- 子组件中，需要将数据传递到插槽，就像将 prop 传递给组件一样 -->    <slot child-info="this is child info"></slot>    <!-- 父组件中，的子组件标签下要有含有 slot-scope 特性的 <template>标签，值为一个临时的对象，接收子组件的 prop -->    <child>        <template slot-scope="props">            <p>{{props.childInfo}}</p>        </template>    </child>

注意：

• 作用域插槽可以是具名的也可以是非具名的
• vue 2.5 之前的版本 使用的是 scope 2.5 及其之后的版本使用的是 slot-scope
• 在 2.5.0+，slot-scope 能被用在任意元素或组件中而不再局限于

相关文章

• vue-cli-webpack模板配置全解析-1
• vue-cli-webpack模板配置全解析-2
• Vue 常用Api整理 1 - 组件属性与方法
• vue 常用Api整理 2 - 生命周期函数
• vue 常用Api整理 3 - 指令
• vue 常用Api整理 4
• vue-router使用整理
• vuex 使用整理