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就可以获取到这个组件的信息，其中就是有我们想要获取的值。

引用信息如下，包含这个组件的所有信息

以上便是组件传值的一些知识点，其实还会很多种传值，比如兄弟组件之间的传值，子孙组件之间的传值，但是其实这些传值通过vuex就可以很轻松的实现了，所以没有继续研究下去了。