Vue组件学习

1、开头说一下注册的组件的方法是：

!!!在这边的开头要注意一下组件书写的时候都是要加上div的，这样在渲染的时候才会把template里面所有的HTML语句都显示出来。

这里的注册的全局组件是：

• 这里的tagName意思是定义的组件的名称，命名的方式是：字母全部都是小写的形式，而且包含一个“-”的符号
• options是放进去的组件的选项对象，这里的组件是可以复用的对象 

Vue.component(tagName,options)

<div id="example">
  <my-component></my-component>
</div>
<script>
  var myComponent = Vue.extend({
    template : '<h2>注册全局组件</h2>'
  });
  //注册全局组件
  Vue.component('my-component',myComponent)

  //创建根实例
  var vm = new Vue({
      el : '#example'
  })
</script>

这里还有一种方法来注册：

这里可以直接将组件的对象用{}括起来之后直接放到里面

<div id="example">
  <my-component></my-component>
</div>
<script>
  //注册全局组件
  Vue.component('my-component', {
      template : '<h2>注册全局组件</h2>'
  })

  //创建根实例
  var vm = new Vue({
      el : '#example'
  })
</script>

•  这里组件注册的时候的data参数中必须是函数：就像下面的一样
• 这里使用函数的作用是对每个example中的组件都是各自独立的，各个组件对于count的调用都是独立的（这里的感觉就像是内存地址是不一样的，但是方法都是一样的）

<div id="example">
  <my-component></my-component>
  <my-component></my-component>
  <my-component></my-component>
</div>
<script>
  //注册全局组件
  Vue.component('my-component', {
      data : function (){
        return {
            count : 0
        }
      },
      template : '<button v-on:click="count++">单击了{
  {count}}</button>'
  })

  //创建根实例
  var vm = new Vue({
      el : '#example'
  })
</script>

2、注册局部组件

• 这里要注意的是局部组件只能在父组件中使用，意思就是只会出现在引用了他的父组件中
• 这里就是层层套用的感觉

<div id="example">
  <parent-component></parent-component>
</div>
<script>
  var Child = {
    template : '<h2>这是子组件</h2>'
  }
  //注册局部组件
  var Parent = {
    template : '<div>\<h2>这是父组件</h2>\<child-component></child-component>\</div>',
    components : {
      'child-component' : Child
    }
  }

  //创建根实例
  var vm = new Vue({
    el : '#example',
    // 这里的就是吧子组件放进去
    components : {
      'parent-component' : Parent
    }
  })
</script>

 3、数据传递

• 这里是父组件使用的，这里的使用的过程是使用props的参数来接收
• 这里props还有命名方式的规定，我这里就不管了我习惯全部小写的形式
• 还有这里的数据传递使用的是v-bind的绑定，吧父组件里的data数据传给子组件

这里举的例子是子组件和父组件的多层的嵌套的使用例子：

• 这里的就是通过在app的div中创建的一个最高级别的父组件，之后通过props的引用和下面的子与子的组件的传递下给了chiledcomponent这个最小的组件。
• 这里我使用了两种方式来进行传参：有引用根实例的name参数，还有直接是根组件的message的属性直接传参。

<div id="app">
  <grandparent-component message="Hello from Grandparent!" :name="name"></grandparent-component>
</div>

<script>
  // 定义最内层的子组件
  var ChildComponent = {
    props: ['message'],
    template: '<p>{
  { message }}</p>'
  };

  // 定义中间层的父组件
  var ParentComponent = {
    props: ['message'],
    components: {
      'child-component': ChildComponent
    },
    template: '<div><h3>Parent Component</h3><child-component :message="message"></child-component></div>'
  };

  // 定义最外层的祖父组件
  var GrandparentComponent = {
    props: ['message','name'],
    components: {
      'parent-component': ParentComponent
    },
    template: '<div><h2>Grandparent Component &nbsp{
  {name}}</h2><parent-component :message="message"></parent-component></div>'
  };

  // 创建根实例
  new Vue({
    el: '#app',
    data : {   //这里其实可以使用data里的值来传递给下面的子组件
      name : 'nihao'
    },
    components: {
      'grandparent-component': GrandparentComponent
    }
  });
</script>

 另外还有props的传参要点就是：1、可以是数组。2、可以是对象。

###这里是数组的传参
<div id="example">
    <my-component :list="type"></my-component>
</div>
<script>
    //注册全局组件
    Vue.component('my-component', {
        props : ['list'],
        data : function (){
            return {
                count : 0
            }
        },
        template : '<div><button v-on:click="count++">单击了{
  {count}}</button>\
        <ol><li v-for="item in list">{
  {item}}</li></ol></div>'
    })

    //创建根实例
    var vm = new Vue({
        el : '#example',
        data : {
            type : 'nihao'
        }
    })
</script>

 这里的是两者结合的代码：

• 这里结合之后的代码中使用的是对象的方式传进来的，这里对象的方式传进来的话就只要在props中放入对象中的属性就可以了

<div id="example">
    <my-component :list="type" v-bind="shop"></my-component>
</div>
<script>
    //注册全局组件
    Vue.component('my-component', {
        props : ['list','name','age','number'],
        data : function (){
            return {
                count : 0
            }
        },
        template : '<div><button v-on:click="count++">单击了{
  {count}}</button>\
        <ol><li v-for="item in list">{
  {item}}</li></ol>\
        <div>名称：{
  {name}}</div><div>价格：{
  {age}}</div></div>'
    })

    //创建根实例
    var vm = new Vue({
        el : '#example',
        data : {
            type : 'nihao',
            shop : {