vue教程（第七节）

今天我们来学习一下vue中非常重要的一个思想，就是组件思想，我们网页的很多部分都是提取成为组件的，它们就像砖块一样，哪里需要哪里搬，极大的减少了我们的开发代码量，我们现在看看如何使用组件吧；

——》先定义一个vue文件：

新建子组件文件.png

我们取名叫child，然后编写子组件的代码，代码结构和所有的vue文件是一样滴，由template、script、style三大标签组成；

——》为了方便区分，我们给它取名也叫child，然后写个p标签，写点文字：

编写子组件代码.png

——》父组件引入子组件文件，然后注册、最后使用，请看代码：

父组件引入子组件并使用代码.png

这是es6的写法，引入外部文件，第二份位置是注册组件，这也是es6的语法，后期我会出个es6语法的简称，做出详细的讲解，其实它的意思是“child”：“child”，第三步就是使用，要注意这里使用是直接作为标签使用，如果注册时候使用的是驼峰写法，那大写字母开头的单词需要在前面加一个短横杆，然后大写变小写，例如：cjildChild=》child-child，这样的写法；我们来看看效果吧：

父子组件效果代码.png

子组件就这样被渲染到了页面呢，非常方便，就是三步，引入文件、注册注册、使用组件。

——》父组件向子组件传值：

父组件如何向子组件传值呢？尤大神想了一个很完美的做法，父组件只有一个，子组件却可以很多，那怎么才能知道传的值是给谁呢的，这就需要子组件做主动的接收了，父组件先通过属性传递的方式将值传到子组件里面：

父传入子组件值代码.png 然后子组件通过props参数作为接收父组件的信号，这里的data和父组件的属性名是一致的，然后子组件就可以直接使用data值了： 父子传值子组件接收值代码.png

我们来看看效果：

父传子效果.png

子组件顺利的渲染出了父组件的值：

——》子组件又如何向父组件穿值呢？

这的确是个问题，不过我们也完美的解决了，那就是通过方法的方式，子组件通过抛一个方法将子组件的值传到父组件，look代码：

子组件向父组件传值代码1.png

子组件定义一个方法chuandataf，然后通过this.$emit("funcz","value")这个函数进行传值，解释一下吧，emit这个对象有两个参数，第一个参数是父组件定义的事件名，第二个参数是子组件所需要传的值，然后父组件那边我们就要这样写了：

子组件传父组件传值父组件代码.png

通过funcz这个事件，传递给一个函数，解释一下(val)=>dataf=val;是es6的写法，意思是将传递的值传给dataf这个参数；我们来看看效果吧：

子组件传值给父组件效果.png

在点击了按钮时候，父组件的值就发生了变化，说明已经将子组件的值传到了父组件；

哦了，这就是vue组件的使用，以及对父传子，子传父的写法！

题外话：父子之间传值仅仅局限于有连接关系的两个组件之间，如果需要隔代传值，或者兄弟传值，或者其他复杂的传值，如果采用父子传值迭代过去的话，那代码就会很丑，而且后期维护会非常复杂，这时候就需要用其他方式来操作了，后期我会介绍用插件vuex来进行状态控制的方式，期待你的观看！哦了，今天就这样了哦，晚安！

小前端公众号