Vue之组件及组件通信

组件之全局组件

//注意：需要在Vue实例化之前注册全局组件，使用Vue.component("组件名",{ template:组件模板 })
Vue.component("show-name",{
template: <div title="注意, 组件模板的根元素必须有且只有一个"> <p>ViavaCos</p> </div>
})

var vm = new Vue({
el:'#app',
data:{
name:'ViavaCos'
},
methods:{}
})

组件之局部组件

// 套路和全局组件一样，这两者只是注册的位置不同，作用的范围也不一样罢了 使用components选项来注册局部
var vm = new Vue({
el:'#app',
data:{},
components:{
'show-name':{
template: <div title="注意, 组件模板的根元素必须有且只有一个"> <p>ViavaCos</p> </div>
}
}
})

组件通信之父组件传递值给子组件

// 父组件传递值给子组件通过自定义属性传递，然后子组件通过porps选项来接收所传递过来的值

一共三个步骤：

1. 在子组件的自定义标签上设置自定义属性，值为父组件需要从传递的值(变量)

2. 在子组件的实例上设置一个叫props的属性，用来接收父组件传递过来的值，props选项是一个字符串数组

3. 由于props选项也被vue实例代理了，所以直接在当前子组件实例中使用this.自定义属性名就可使用了

   
   // 1. 设置自定义属性
   
   
   
   
   

组件通信之子组件传递给父组件

一共五个步骤：

1. 在子组件的组件模板上设置一个点击事件，用来触发自定义事件用于传值

2. 在子组件的methods中设置点击事件的事件处理程序：内容为执行自定义事件this.$emit("自定义事件名", 若干个参数)

3. 在父组件管理的视图，也就是书写子组件的自定义标签的地方，在这个标签上设置自定义事件的监听(用v-on指令就行)

4. 提前在父组件的数据对象data中定义一个容器来接收子组件传递过来的值

5. 在父组件的methods中设置监听自定义事件的事件处理程序：由于事件触发了，会有写好的若干个参数传递过来，所以在这里处理一下。将传递来的值用方才定义好的容器接收，然后就可以放心使用这个子组件传递来的值了

   
   
   <show-city @getcity='exeCity' v-for="item in city" :city="item" :tcity="tcity">