Vue全栈基础之组件传值
Vue全栈基础之组件传值
Vue是现在国内最主流的一套前端开发的框架，虽然一直在学习，且也学了很多遍，但是还是老样子学一遍忘一遍，所以现在决心更新这个系列的博客，再将Vue中最终重要的一些只是点过一遍。
Vue或者说前端开发框架绝大多数都是组件化的形式开发，为了能够更好的复用。在使用组件化开发的时候我们就避免不了组件之间的传值，虽说现在已经是绝大多数的情况下我们使用vuex这个仓库进行同意的状态管理来避免组件之间的传值，但是组件之间的传值任然是及其重要的一个知识点。
因为直接使用cdn的方式更加适合学习，文件也没那么大，所以以下的代码都是使用cdn的形式。
创建组件
组件时有*部组件和全局组件的，局部组件在父组件的components属性中定义即可，全局组件则是上升到在Vue实例上注册。
- 全局组件：
子组件的一些data数据吗，方法是在template之后定义. - 私有组件
私有组件则是通过挂载在components属性里面进行定义，当然这都是在cdn开发模式下的定义组件的方式，当我们使用脚手架开发的时候，一个组件就是一个.vue结尾的文件。
父组件 => 子组件
父组件给子组件传值时，子组件需要定义props卡槽来接收父组件传递的值
子组件 => 父组件
子组件给父组件传值一般使用的方法有两个，一个是通过自定义事件的方式传值，第二是通过引用的方式进行传值
主要的步骤如下：
- 子组件内部通过
this.$emit('方法名','值')的方式，自定义一个事件 - 在子组件标签中将这个方法暴露出来
- 父组件通过这个自定义方法的方法名来接收这个数据
ref引用传值
ref引用在以往的学习中，我用的比较多的是将dom设置ref，我们可以通过this.$refs.引用名来获取dom的一些信息，但是其实我们如果给组件标签绑定一个ref，那么这个ref就可以获取到这个组件的信息，其中就是有我们想要获取的值。
引用信息如下，包含这个组件的所有信息