1 注册
在 src/components 下新建 index.js 文件，复制贴入以下代码：
注册全局组件需要使用 Vue.component，第一个参数 ‘Message‘ 是组件名称，第二个参数 Message 是一个对象或者函数，我们这里是一个对象。（vue-cli模板下）
import Message from ‘./Message‘
Vue.component(‘Message‘, Message)
2 引用
打开 src/main.js 文件，引入 ./components：
import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘
import ‘./directives‘
import ‘./components‘我们通过引入 ./components/index.js，执行其中代码，就可以使用其内部注册的所有组件了。
3 使用
在目标组件的 data 中添加了 3 个消息组件相关的属性 msg、msgType 和 msgShow
<script>
import createCaptcha from ‘@/utils/createCaptcha‘
import ls from ‘@/utils/localStorage‘
export default {
name: ‘Register‘,
data() {
return {
captchaTpl: ‘‘, // 验证码模板
username: ‘‘, // 用户名
password: ‘‘, // 密码
cpassword: ‘‘, // 确认密码
captcha: ‘‘, // 验证码
msg: ‘‘, // 消息
msgType: ‘‘, // 消息类型
msgShow: false // 是否显示消息，默认不显示
}
},
然后在 methods 中添加了一个 showMsg 的方法用来改变当前的消息；
methods: {
login(user) {
ls.setItem(‘user‘, user)
this.showMsg(‘注册成功‘, ‘success‘)
},
showMsg(msg, type = ‘warning‘) {
this.msg = msg
this.msgType = type
this.msgShow = false
this.$nextTick(() => {
this.msgShow = true
})
}
}
}
</script>组件并不总是具有相同的结构。有时需要管理许多不同的状态（注：指的是根据不同状态显示不同组件）。异步加载组件对此操作很有帮助。在 Scrumpy 中组件用于提醒、评论和附件等多个地方。
本文介绍了编写 Vue.js 组件前需要知道的 10 件事，其中包括：组件可以全局或局部加载；延迟加载 / 异步组件；必需的 Props；使用 $emit 触发自定义事件；多 Props 绑定和覆盖等等。
我在最近的工作中开始使用 Vue 进行开发，但是我在上一家公司积累了三年以上 React 开发经验。虽然在两种不同的前端框架之间进行切换确实需要学习很多，但是二者之间在很多基础概念、设计思路上是相通的
在开发中经常有从列表跳到详情页，然后返回详情页的时候需要缓存列表页的状态（比如滚动位置信息），这个时候就需要保存状态，要缓存状态；vue里提供了keep-alive组件用来缓存状态。
通过Props 给子组件传变量，变量是对象时，子组件无法在首次打开时获取到传入对象数据，并且在父组件中改变对象的属性，子组件也是无法监听
实现功能：自定义文本：自定义类型(默认，消息，成功，警告，危险)；自定义过渡时间；使用vue-cli3.0生成项目，toast全局组件编写
当数据通过异步操作后，对之前加载的数据进行变更后，发现数据不生效。A组件或者B组件触发数据更新，C组件数据更新了，但是C组件仍显示上一次数据。
有没有遇到这样一种情况，你花了很大精力在业务项目中写了一个组件，你觉得这个组件很通用，除了当前的业务场景还应该有其他的应用场景，所以你想开源这个组件，但又不知道从何入手。这篇文章就来聊聊如何开源一个前端组件
在我们平时练习或者实际项目中也好，我们常常遇到这么一个需求：移动端中的导航并不是在顶部也不是在底部，而是在最底部且是固定的，当我们点击该导航项时会切换到对应的组件
Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言。创建一个 Context 对象。当 React 渲染一个订阅了这个 Context 对象的组件