Vue再学习2_组件开发

Vue再学习2_组件开发

全局组件

在main.js中配置，配置完成之后可以全局使用

// 1、引入组件对象
import GlobalTitle from './components/GlobalTitle.vue'
// 2、声明全局组件 Vue.component('组件名',组件对象);
Vue.component('globalTitle',GlobalTitle);


// 3、在其他地方的布局中通过组件名进行使用
<globalTitle/>

子组件

在子布局中使用

// 1、创建对应的子组件vue对象
<template>
    <div>
        foot
    </div>
</template>
<script>
  export default {
      data(){
          return {
          }
      },
  }
</script>
<style scoped>
 div{
    height: 100px;
    background-color: red;
}
</style>


// 2、在要引入的vue中的script中引入子组件对象
import headVue from './HeadVue.vue'
import bodyVue from './BodyVue.vue'
import footVue from './FootVue.vue'
 
 
// 3、在要引入的vue中的components中申明
 components:{
   headVue,
   bodyVue,
   footVue,
 },
 
// 4、在要引入的vue中的template中进行使用
<head-vue></head-vue>
<body-vue></body-vue>
<foot-vue></foot-vue>

scoped

在style标签上添加scoped属性，以表示它的样式作用于当下的模块。在与全局的样式冲突的时候使用本地样式。

父组件传递值给子组件

// 1、在父组件中调用的位置添加要传入的属性
<headVue headData="1111"></headVue>

// 2、在子组件中声明对应的属性
export default {
  data(){
  	return {   
  }
},
  props:{
    headData:'',
  },
}

// 3、在对应的位置进行使用
{{headData}}

子组件传递值给父组件

监听传递

// 1、创建Vue对象
import Vue from 'vue'
var connector = new Vue();
export default connector;

// 2、在父组件中导入vue对象并注册监听
import connect from '../tools/connector.js'

methods: {
  listen(){
		// connect.$on('事件名',回调监听）
    connect.$on('phone',function(msg){
  })
  }
},

// 3、在子组件中导入vue对象并设置传递内容
import connect from '../tools/connector.js'

 methods:{
   call(){
		// connect.$emit('事件名','prop1','prop2');
     connect.$emit('phone','22222');
   },
 }

注意：

取消注册：

 connect.$off('事件名');