• vue组件使用与父子传递

  ---

  创建组件构造器对象

  template中是组件的DOM元素内容。

  注册组件

  1. 全局注册，通过 Vue.component 。
  2. 局部注册，通过 components:{cpnc:cpnc}。

  使用组件

  ​ 像使用html标签一样使用。

    <div id="app">
      
      <my-cpn>my-cpn>
      <my-cpn>my-cpn>
      <my-cpn>my-cpn>
      <cpnc>cpnc>
    div>
  

  全局组件和局部组件

  组件的注册方式有两种，一种是全局组件一种是局部组件。

    
  "app">
      <h2>全局组件h2>
      <my-cpn>my-cpn>
      <h2>局部组件h2>
      <cpnc>cpnc>
    

• <script src="../js/vue.js">script>
• <script>
• // 1.创建组件构造器对象
• const cpnc = Vue.extend({
• template:`
• 标题

• 内容1

• 内容2

• `

})

// 2.注册组件（全局组件，可以在多个vue实例中使用）

Vue.component('my-cpn', cpnc)

const app = new Vue({

el:"#app",

components:{//局部组件创建

cpnc:cpnc

}

})

script>

全局组件

全局组件，可以在多个vue实例中使用，类似于全局变量。

​ 使用Vue.component('my-cpn', cpnc)方式注册，直接使用调用。my-cpn是全局组件的名字，cpnc是定义的组件对象。

局部组件

​ 局部组件，只能在当前vue实例挂载的对象中使用，类似于局部变量，有块级作用域。

 const app = new Vue({
      el:"#app",
      components:{//局部组件创建
        cpnc:cpnc
      }
    })

​ 使用方式与全局变量一样，直接使用调用。cpnc:cpnc第一个cpnc是给组件命名的名字，第二个是定义的组件对象。如果俩个同名也可以直接使用es6语法：

components:{//局部组件创建
        cpnc
}

父组件和子组件的区别

  
"app">
    <cpn2>cpn2>
  

<script src="../js/vue.js">script>

<script>

// 1.创建组件构造器对象

const cpn1 = Vue.extend({

template:`

<div>

<h2>标题1h2>

<p>组件1p>

div>`

})

// 组件2中使用组件1

const cpn2 = Vue.extend({

template:`

<div>

<h2>标题2h2>

<p>组件2p>

<cpn1>cpn1>

div>`,

components:{

cpn1:cpn1

}

})

const app = new Vue({

el:"#app",

components:{//局部组件创建

cpn2:cpn2

}

})

script>

 上述代码中定义了两个组件对象cpn1和cpn2，在组件cpn2中使用局部组件注册了cpn1，并在template中使用了注册的cpn1，然后在vue实例中使用注册了局部组件cpn2，在vue实例挂载的div中调用了cpn2，cpn2与cpn1形成父子组件关系。

注意：组件就是一个vue实例，vue实例的属性，组件也可以有，例如data、methods、computed等。

 使用props属性，父组件向子组件传递数据

使用组件的props属性

const cpn = {
  template: "#cpn",
  props: { 
          cmessage: {
          type: String,
          default: 'zzzzz',
          required: true //在使用组件必传值
          }
  }
}

向cmessage对象传值

"app">
    <cpn :cMessage="message">cpn>

props属性使用

数组写法

props: ['cmovies', 'cmessage']

对象写法

  props: { 
          cmessage: {
          type: String,
          default: 'zzzzz',
          required: true //在使用组件必传值
          }
  }

props属性的类型限制

//1.类型限制(多个类使用数组)
cmovies:Array,//限制为数组类型
cmessage:String,//限制为Strin类型
cmessage:['String','Number']//限制为String或Number类型

props属性的默认值

// 2.提供一些默认值，以及必传值
        cmessage: {
          type: String,
          default: 'zzzzz',//默认值
        }

props属性的必传值

cmessage: {
          type: String,
          default: 'zzzzz',
          required: true //在使用组件必传值
        }

类型是Object/Array，默认值必须是一个函数

//类型是Object/Array，默认值必须是一个函数
cmovies: {
	type: Array,
	default () {
		return [1, 2, 3, 4]
	}
},

自定义验证函数

vaildator: function (value) {
	//这个传递的值必须匹配下列字符串中的一个
	return ['zzzzz', 'ttttt', 'yyy'].indexOf(value) !== -1
}

自定义类型

    function Person(firstName,lastName) {
      this.firstName = firstName
      this.lastName = lastName
    }
	cmessage:Person//限定了cmeessage必须是Person类型