组件

把某个界面或者说某个小功能，封装起来就叫组件（就是对html css js的一个综合封装），组件也是Vue的实例，所以它也有自己的data和methods以及生命周期钩子等

组件开发特点：可复用，同时会简化代码结构，易于维护，同时利于多人协同开发等。

$nextTick

setTimeout高级版本 离它最近的一个dom刷新

单文件组件

template html 唯一的元素包住

js

css 导入 @import url(路径)

组件中引入其它组件

组件的使用三步

1：导入组件

import 自定义的一个组件名 from "组件路径";

注意点，这里组件路径就算是当前同一目录也最好加上"./组件名"，不然会报错

2：注册组件

组件的使用是需要注册的，注册方式为：

export default {  components: {    组件名,     //注册的组件都写在components对象下。  }}

3：使用组件(写到相应html位置即可)

<组件名></组件名>   //该组件名来自于在组件注册时的组件名<template>  <div class="main">    <!-- 使用组件  -->    <!-- 在这index.vue是父组件，top，middle，bottom是子组件 -->    <!-- top与middle是兄弟组件 -->    <top></top>    <middle></middle>    <bottom></bottom>  </div></template><script>// 导入组件  这里面top,middle,bottom是需要另外创建的vue组件，这里是没创建的import top from "./top.vue";import middle from "./middle.vue";import bottom from "./bottom.vue";​export default {  // 组件注册  components: {    top, //相当于top:top    middle,    bottom  }};</script><style>.main {  width: 100%;}.main img {  width: 100%;}</style>

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取

组件间的传值

如果A组件中引入了B组件 ，这样我们称A组件为父组件，B为子组件

父组件传值给子组件

在子组件标签上定义一个ref属性

<组件名 ref="xxx"></组件名>
在需要给子组件传值的地方写入：

this.$refs.xxx   //这就代表了子组件xxx的vue实例//这里xxx代码标签中定义的ref属性名这里就可访问到子组件里面的data属性与methods方法//如要修改子组件里面data里的某个值：          this.$refs.xxx.子组件里data属性名//如果需要调用子组件里面methods里某个方法：   this.$refs.xxx.子组件里面methods里方法名  

子组件传值给父组件

this.$parent    //这就代表父组件的vue实例    //如要修改父组件里面data里的某个值：         this.$parent.父组件里data属性名    //如果需要调用父组件里面methods里某个方法：   this.$parent.父组件里面methods里方法名   

注意：ref获取到的dom信息在这里与document.getElementById是有本质 区别的

//两个组件，这个是father.vue<template>  <div>    <button @click="btnClick">点我获取数据</button>    <div>你选中的当前歌曲:{{localSong}}</div>    <son ref="son" id="son"></son>  </div></template><script>// 组件使用，导包，注册，使用//1：导包import axios from "axios";import son from "./son.vue";export default {  data() {    return {      songs: [],      localSong: ""    };  },    //2：注册  components: {    son  },  methods: {    btnClick() {      window.console.log("ref访问：", this.$refs.son.$el);      window.console.log("原生访问:", document.getElementById("son"));      //要调接口，是不是要使用axios      //装包，导包，用包      axios({        url:          "神话&_t=" + Math.random() * 100      }).then(res => {        //   父组件传递子组件值，在子组件上定义一个ref,通过this.$refs.名字，我们就能访问子组件的实例，也就是可访问子组件data属性与methods方法        this.$refs.son.songs = res.data.result.songs;        this.$refs.son.alertEvent();        window.console.log(res.data.result.songs);      });    }  }};</script><style></style>//son.vue<template>  <ul>    <li v-for="(item, index) in songs" :key="index" @click="liCLick(item.name)">{{item.name}}</li>  </ul></template><script>// 子组件访问父组件里的data与methods更简单，只需要this.$parent就够了export default {  data() {    return {      songs: []    };  },  methods: {    liCLick(name) {      this.$parent.localSong = name;      window.console.log("访问父组件：", name, this.$parent);    },    alertEvent() {      alert(123);    }  }};</script><style></style>

总结:

父传子

定义： 标签上定义一个ref=值使用 this.$refs.值 //返回子级this

子传父

this.$parent //返回父级this创建脚手架

//这里项目名不要有中文，不要有大写字母，不要搞特殊符号，尽可能有意义 ，像普通变量命名一样vue create 项目名      

原文链接：

作者：ff186345