Vue 组件的使用

什么是组件？

组件是可复用的 Vue 实例,我们可以通过组件的使用来减少 Vue 实例的代码量。利用不同的组件划分不同的功能模块,我们可以通过调用组件实现相应的功能。

---

组件的创建

我们可以像这样创建全局组件

// 使用 Vue.extend 来创建全局的 Vue 组件
var component1 = Vue.extend({
  // 通过 template 属性，指定了组件要展示的 HTML 结构
  template: "
这是使用Vue.extend创建的组件
"
});
// 使用 Vue.component('组件的名称'，创建出来的组件模板对象) 注册
Vue.component("myCom1", component1);

像这样使用

注意：
W3C 标准：标签名，属性名一律不准使用大写、大小写混拼。我们在注册的时候可以用小驼峰 myCom1，但是在使用的时候应该改成 my-com1

自然地，我们也可以像这样创建组件

Vue.component('myCom1', Vue.extend({
  template: '
这是使用Vue.extend创建的组件
'
}))

或者像这样

Vue.component('myCom2', {
  // 注意不论是那种方式创建出来的组件，组件的 template 属性指向的模板内容，必须有且只能有唯一的一个根元素
  // 所以，我们在这里加了个 div 包上
  template: '
这是直接使用 Vue.component 创建出来的组件
123
'
})

但是像这样的话，一大段模板都不会出现提示，所以可以这样

Vue.component("myCom3", {
  // template 的 id
  template: "#tmp1"
});

然后定义模板

以上都是全局组件，实际上我们可以定义私有的,使用的时候注意作用区域

var vm2 = new Vue({
  el: "#app2",
  data: {},
  methods: {},
  components: {
    // 定义实例内部私有组件
    login: {
      template: "#tmp1"
    }
  }
});

---

组件中的 data

data 必须是个函数

Vue.component("myCom1", {
  template: "
这是一个组件：{{ msg }}
",
  data: function() {
    return {
      // 用这种方式来返回数据
      msg: "这是组件中定义的数据"
    };
  }
});

Q: 那么，组件酱中的 data 为什么一定要是个函数？

A: 这样规定，每个实例化的组件的数据都有一个自己的作用域，防止同种组件实例 A 数据的改动的同时影响同种组件实例 B 的数据

---

利用 控制组件的切换

在页面中的一个地方，我们可以利用 占位符来控制组件的切换(一个直观的例子：页面的登录框和注册框的切换)

以防万一，贴上代码

  登录
  注册
  
  
  
  

p.s. 如果想要在切换的时候加上动画，就像之前一样，套上一层 标签，写上相应的样式即可

---

使用 prop 父组件向子组件传值

我们现在有个 Vue 实例, Vue 实例有个私有的组件 com1

var vm = new Vue({
  el: "#app",
  data: {
    msg: "123----父组件中的数据"
  },
  methods: {},
  com1: {
    // 子组件的 data 数据并不是通过父组件传递过来的，而是子组件自己私有的，
    // 比如：子组件通过 Ajax 请求回来的数据，都可以放到 data身上
    // data 上的数据 可读可写
    // props 上的数据 可读，不建议修改
    data: function() {
      return {
        title: "123",
        content: "aaa"
      };
    },
    // 子组件默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法
    template: '这是子组件{{ parentmsg }}',
    // 组件中所有 props 中的数据，都是通过父组件传递给子组件的
    props: ["parentmsg"], // 将父组件传递过来 parent 属性，现在 props 数组中定义一下才能使用这个数据
    methods: {
      change() {
        this.parentmsg = "被修改了";
      }
    }
  }
});

对于我们要使用的数据，在 html 用 v-bind 绑定如下，然后将绑定好的属性 parentmsg 添加进子组件 com1 的属性 props 列表中，即可在子组件中使用
关于 props 更多信息点击这里

---

父组件向子组件传递 methods

我们有一个 Vue 实例 vm ，它有个子组件 com1 ，vm 中即将被调用的函数为 show 函数，对此我们在 html 中用 v-on 绑定

在子组件中的方法 myClick 中，用 $emit 触发这个函数

另外值得注意的一点，这个结构也可以完成子组件向父组件传值，在父组件被调用的方法 show 中，留下一个引用 data ,可以用 $emit 函数的第二个及以后的参数，传回父组件。

---

利用 ref 获取 DOM 组件和元素

  
  
今天天气不错
  

  
  

在父组件中定义的函数：

getElement() {
  console.log(this.$refs.myIndex.innerText)
  console.log(this.$refs.myLogin.msg)
  this.$refs.myLogin.show() // show 为在子组件中定义的方法
}

---

如有不足请指正，谢谢！