vue局部组建和全局组卷

公共组件全部放在src\components\下

在src\components\下建立：Top.vue

代码：

<template>
  <div>
        <div @click="topClick">Top{{name1}} {{name2}}</div>
  <div>
</template>
<script>
export default {
  data(){
      return {
          isTop : false
      },
  },
  // 声明接受父组件传入的值
  props:['name1', 'name2'],
  methods: {
      topClick(){
          //抛出事件 给父组件
          this.$emit('topClick', this.isTop = !this.isTop);
      }
  }
}
</script>
<style scoped>
    div {
      background-color: #42b983;
      width: 100px;
      height: 100px;
      position: absolute;
      right: 30px;
  }
</style>

新建index.vue，导入公共组件

<template> 
  <div>
      <!--topVue></topVue-->
      <!-- 
        1.建议使用驼峰式写法
        2.给组件传入参数：属性="参数值" ； :属性="变量" 等价于v-bind:属性="变量"
        3.ref给组件取别名通过别名获取子组件属性和方法
    -->
      <top-vue @topClick="topClick' name1="参数1" :name2="title" ref="childTop"></top-vue>

  <br/><br/>
  <button @click="childTop">获取子组件信息</button>

  </div>
</template>
<script>
//导入组件
import topVue from '@/components/Top';

export default {
  data(){
    return {
        title: '参数2'
    }
  },
  methods:{
    //监听子组件抛出事件
    topClick(isTop){
      console.log(isTop);
    },
    //获取子组件信息
    childTop(){
      console.log(this.$refs.childTop.isTop);
    }
  },
  //声明组件
  components:{
      //topVue: topVue,
      //如果导入组件取的别名和声明组件的key一样，可简写，否则就要key:value形式
      topVue  
  }
}
</script>

公共组件全部放在src\components\下

在src\components\下建立：Header.vue

代码

<template>
  <div>
      <div>头部信息，全局组件</div>
  </div>
</template>
<script>
export default {}
</script>
<style>
</style>

引入全局组件放在：src\main.js 中

//导入全局组件
import headerVue from '@/components/Header';
//注册全局组件
Vue.component('headerVue ', headerVue );

在任意vue模板中可直接使用全局组件

<template>
  <div>
      <header-vue></header-vue>
  <div>
</template>

关于父子组件通信、传值 请参 4.Vue 局部组件 文章

作者：圆梦人生
链接：https://www.jianshu.com/p/49a4221d8fc2
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。