组件

组件

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

全局组件:

//如果创建的组件使用大驼峰命名法，此处需要用"-"链接

//创建全局组件
Vue.component('myCom',{
template:'

cc

'//此处为根元素,只能有一个,如果多写或者不写，
报错:
Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
翻译:组件模板应该只包含一个根元素。如果在多个元素上使用v-if，则使用v-else-if来链接它们。

})

//实例化Vue
new Vue({
el:'#box'
})

最后:【此时页面上则显示组件根元素上的内容cc】

局部组件

//绑定vue实例中的数据的c值

var com1 = {
props: ['c'],//父组件向子组件传过来的值
template: <div>abc231 {{a}} {{c}} <button @click="inc">+</button> </div>,
注意事项1：
【数据data必须为函数类型,其返回值必须使用return返回一个对象形式，只有这样外面才可以调用,因此每个实例可以维护一份被返回对象的独立的拷贝：】
data() {
return {
a: 1
}
},
方法：点击++
methods: {
inc() {
this.a++
}
}
}
注意事项:2
定义一个组件，此组件要与局部组件的名称一致，否则会报错(局部组件.html:46 Uncaught ReferenceError: com is not defined
at),如果html的标签名与组件名不一致，会显示(vue.js:634 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in ))
new Vue({
el: '#box',
components: {
com1
}
})

props验证

props:{
type:Number //类型，可以为其他类型
require:true //可以使用required选项来声明这个参数是否必须传入。
default:1000 //默认值
validator(v){
return v>值&&v<值 //自定义规则
}
}

子组价向父组件传值

1、其中有两个事件需要注意一下$emit和v-on(以下代码详细阐述)
2、主要部分为两步(
1、父组件监听，使用v-on:事件名="事件处理函数($event其实就是一个值，可以省略)"
2、子组件发送数据(使用this.$emit('msg',发送的数据))
)

兄弟组件通过公共的父组件传值

//监听子组件传过来的值,此处省略($event)传过来的值

使用bus方式进行子向父组件传递