Vue插槽（Slots）用于向组件传递一些模板片段，让子组件在它们的组件中渲染这些片段。插槽也是属于一种父组件到子组件的组件间通行的方式。 Vue插槽有以下3种类型： 默认插槽。 具名插槽。 作用域插槽。 默认插槽 使用默认插槽时，只需在子组件模板中，将要从外部传入的模板内容，使用<slot>进行占位即可。 例如有一个名为display-frame的组件，其模板内容如下： 1<div class="display-frame"> 2 <h3>{{title}}</h3> 3 <!-- 默认插槽，等待组件的使用者进行填充 --> 4 <slot> 5 默认插槽内容。使用者没有传递结构时，会显示。 6 </slot> 7</div> 该...

通常情况下，跨域问题是由服务端依靠CORS或JSONP等方法解决。为了在开发过程中不依靠后端解决跨域问题，可以使用一台与前端页面服务的Host相同的代理服务器，将请求发送给这台代理服务器，然后再由代理服务器将请求转发给真实的服务器。 使用服务代理可绕开浏览器同源策略的限制。服务代理可以使用Nginx等应用创建，当然Vue CLI也支持创建代理。 Vue CLI代理需要在vue.config.js中进行配置。 注：Vue CLI代理仅是在开发过程中使用的。 简单代理 Vue CLI创建代理最简单的方式就是： 1module.exports = { 2 devServer: { 3 proxy:...

在Vue中，每个组件都有其对应的生命周期，这个过程与Vue 生命周期中描述的过程一致。 Vue组件的生命周期图示如下： 下图是尚硅谷天禹所给的有关Vue生命周期的解释： 嵌套组件的生命周期 定义存在嵌套关系的组件： App.vue（父组件，3秒后自动销毁）： 1<template> 2 <div> 3 <h1>App.vue</h1> 4 <UserInfo/> 5 </div> 6</template> 7 8<script> 9import SubComponent from './components/SubComponent.vue'; 10 11export default { 12 name: 'app', 13...

Vue组件间的通信还可借助第三方库来实现。而pubsub-js就是一种实现了消息的订阅与发布的库。使用pubsub-js可以实现任意组件间的通信。 安装pubsub-js： 1npm i pubsub-js 在需要发布或订阅消息的组件中引入pubsub-js： 1import pubsub from 'pubsub-js' 发布消息 pubsub-js发布消息可以使用pubsub.publish()方法： 1pubsub.publish(msgName, data) msgName：发送消息的名称，字符串类型。 data：发送的消息（数据），类型任意。 注：pubsub.publish()与$bus.$emit()方法不一样...

给一个子组件定义自定义事件的步骤大致如下： 在父组件中使用v-on绑定自定义事件，并定义回调。 例如给一个user-info绑定自定义事件： 1<!-- 2 App.vue 3 --> 4 5<template> 6 <div> 7 <!-- 8 通过父组件给子组件绑定一个自定义事件 9 实现子组件给父组件传递数据 10 使用 .once 修饰符，让事件只在第1次被触发时执行回调 11 --> 12 <user-info @get-name.once="getUserName"/> 13 </div> 14</template> 15 16<script> 17 import UserInfo from...

样式冲突 Vue多组件开发时，组件中的CSS样式默认是全局使用的。例如在A.vue这个组件中定义的样式，也会在B.vue这个组件中生效。 而当项目中使用的组件越来越多时，这种全局通过的CSS样式的方式势必会影响整个项目，导致样式冲突。例如A.vue和B.vue都用了.demo这个样式，那么在引入和使用组件时，会造成样式的冲突。相同选择器的样式，究竟是哪个组件中的样式生效？ Vue在引入组件.vue时，如果存在相同的样式导致的冲突，后引入的组件会覆盖先引入的组件中相同的样式。例如A.vue和B.vue都用了.demo这个样式： 1import A from './components/A.vue' 2import B from...

混入（mixin）是指将多个组件重复的、可共用的配置选项提取成一个混入对象，然后在这些组件中对这些配置选项进行重用。 局部混入 局部混入是指在组件或特定的Vue实例中引入通用的配置对象。 例如： 1/** 2 * mixin.js 3 * 混入配置对象 4 */ 5 6// 组件中的配置选项基本上都能在 mixin 中使用 7export const mixin1 = { 8 methods: { 9 showName() { 10 alert(this.name) 11 } 12 }, 13 mounted() { 14 console.log('Hello mixin1!'); 15 }, 16} 17 18export...

在Vue中，父组件可以往子组件中传递一些属性值。而子组件需要使用props配置项定义这些要从父组件中获取的数据。 使用props配置项，可以让该组件的标签在被使用时，通过组件标签属性将值传入组件中。 例如： 1<!-- SiteUser.vue --> 2<template> 3 <div> 4 <h2>姓名：{{name}}</h2> 5 <h2>年龄：{{age}}</h2> 6 <h2>性别：{{sex}}</h2> 7 </div> 8</template> 9<script> 10export default { 11 name: 'SiteUser', 12 // 声明需要接收的属性 13 props: [ 14...

ref 属性 在Vue的模板中可以通过为元素或子组件添加ref属性（如ref="elementRefValue"）来告诉Vue实例（或组件实例）要获取该元素。例如： 1<h1 v-text="msg" ref="title"></h1> <!-- 获取Html内置标签元素 --> 2<MySite ref="site"/> <!-- 获取Vue组件 --> 在Vue中，ref属性被用来给元素或子组件注册引用信息。 然后在Vue实例或组件实例中，通过this.$refs.elementRefValue来获取该元素或子组件的对象。例如： 1this.$refs.title // 获取真实DOM元素 2this.$refs.site...

单文件组件 Vue单文件组件是指使用由Vue定义的.vue格式的文件。.vue文件模板如下： 1<!-- Vue 只能包含以下三种标签 --> 2 3<!-- 组件的结构 --> 4<template> 5 <!-- ... --> 6</template> 7 8<!-- 组件交互相关的代码（数据、方法等等） --> 9<script> 10 export default { 11 // ... 12 }; 13</script> 14 15<!-- 组件的样式 --> 16<style> 17 /* ... */ 18</style> 其中： <template>：用于定义组件的结构。相当于组件配置中的template配置项。...