前言：

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

注册组件

新建组件

右键新建一个dataName.vue的组件
新建好之后的组件

dataname代码

 <!--
 * @Description:
 * @Version:1.0
 * @Author: 
 * @Date：2020-11-8 9:25:00
 * @LastEditors: 康世行
 * @LastEditTime:  2021年7月3日10:26:26
 角色分组
 -->

<template>
  <div>
    <div class="combox">
      <el-select v-model.trim="name" 
       @change="transRuleName"
       placeholder="默认显示内容">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          >
      </el-option>
    </el-select>
    </div>
  </div>

</template>
<style scoped>
.exInput {
  text-align: center;
}
>>> .el-input__inner {
  border: 2px solid #dcdfe6;
}
.input {
  width: 70%;
}
</style>

<script>
export default {
  inject: ['next'],
  //  接收父組件傳來的值
  props: ['ruleName'],
  data: function() {
    return {
      name: this.ruleName,
      options: [ 
      {
        value: '选择1',
        label: '选择1'
      }, {
        value: '选择2',
        label: '选择2'
      }, {
        value: '选择3',
        label: '选择3'
      } ]
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.code.focus() //输入框默认获取焦点
    })
  },
  watch: {
    ruleName(val, newval) {
      this.name = val
    },
  },
  methods: {
    clickitem(e) {
      e === this.radio ? (this.radio = '') : (this.radio = e)
    },
    //子組件向父組件通信
    transRuleName() {
      this.$emit('ListenRuleName', this.name)
    },
    //enter点击进入下一步
    enterNextClick() {
      this.next()
    },
    //获取焦点的时候选中文本
    focus(event) {
      event.currentTarget.select()
    },
  },
}
</script>
<style scoped>
  .combox{
    text-align: center;
    text-align-last: center;
    margin: auto auto;
    margin-top: 150px;
  }
</style>

引入组件

在需要使用刚才创建的那个组件的，窗体里引入刚才的那个组件

在里引入刚才创建的那个组件，引入方式如上图所示

然后再注册成具体的组件，如下图所示

使用组件

上面已经注册好组件了，下面就是在template里使用了

解释：可以看到刚才注册的组件dataName现在，作为标签在template里使用。其实组件可以理解为自定义标签

$Emit（实现父子组件通信）

前提条件是已经注册好组件了，下面就可以使用组件通信了。

父组件

   在template引入的组件里定义一个事件，如下

   并且对应着还得定义一个方法，如图所示 “transRuleName” 等会儿在子组件里使用
  在methods方法里定义如下方法

//用于接收ListenRuleName事件接收的值

   transRuleName(name) {
      this.ruleName = name;
    }

ruleName参数是声明在data属性里的，用于存储transRuleName方法接收的值

   data: function () {
    return {
      ruleName: ""
    };
  }

子组件

这里已下拉框为例
template代码

 <template>
  <div>
    <div class="combox">
      <el-select v-model.trim="name" 
       @change="transRuleName"
       placeholder="请选择角色">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          >
      </el-option>
    </el-select>
    </div>
  </div>

</template>

给下拉框绑定change事件 “transRuleName”

change事件

  //子組件向父組件通信
    transRuleName() {
      this.$emit('ListenRuleName', this.name)
    }

参数：
ListenRuleName 这就是刚才上面在父组件里定义的事件名字， this.$emit(‘ListenRuleName’, this.name)
这段代码的意思是把后面this.name参数的内容推到 ListenRuleName 事件里
name参数定义方法和上面父组件里的方法一样

感谢阅读~~~~~ 分享到此结束

Date2021-06-09 By WJB

Vue框架中强调单向数据流。对于 Vue 来说，组件之间的数据传递具有单向数据流这样的特性。
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子 组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为 最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做 了，Vue 会在浏览器的控制台中发出警告。

那么如何显示子组件向父组件发送数据呢？答案：事件（event）；

子组件 item.vue，通过 this.$emit("active",'params');发送向父组件发送信号， active是自定义事件的名称，可以根据需要自己定义；params 是传递的参数可以自己定义。

<template>
  <div class="item" :class="{ active: isActive }"  @click="handleClick">
    <!-- 插槽 -->
    <slot></slot>
  </div>
</template>

<script>
export default {
  props:{
      isActive:{
          type:Boolean,   //限制属性类型
          required:true, //约束该属性必须传递
          default: true,//默认属性
      },
  },
   methods: {
        handleClick(){
          // active是自定义事件的名称，可以根据需要自己定义
          // params 是传递的参数可以自己定义
          // this.$emit() 事件信号发送 通知父组件
          this.$emit("active",'params'); 
        },
      },
}
</script>
/*scoped 表示局部，解决样式冲突*/
<style scoped>
.active{
    background:#e7e7e7;
}
.item{
    cursor: pointer;
    width: 100%;
    height: 100%;
    transition:0.5s;
}
.item:hover{
  background: #f4f4f4;
}
</style>

父组件 app.vue，父组件要注册事件接收子组件通知，注册方式与常规事件一样 @+事件名称，及代码中 @active="curActive='dongman'" 语句。

<template>
<div>
 <div style="width:100px; height:50px; border:2px solid" >
   <!--active 子父组件自定义事件，子组件 发送信号后 即可执行“curActive='dongman”，这句代码
    也可以调用事件-->
    <Item :isActive="curActive==='dongman'" @active="curActive='dongman'" >
      动漫
    </Item>
 </div>
 <div style="width:100px; height:50px; border:2px solid" >
    <Item :isActive="curActive==='dianying'"  @active="curActive='dianying'" >
      电影
    </Item>
  </div>
</div>
 
</template>
<script>
import Item from './components/item'
export default{
  components:{
    Item,
  },
  data()
  {
     return{
       curActive:"dongman"
     }
  },
}

</script>

获取源码地址：

源码说明，需要安装node，vue ，npm；源码中没有带带三方依赖库，所以要在当前文件夹执行 npm install 命令。

vue3.0

父组件parentComponent.vue

// An highlighted block
<template>
  <div>
    <h1>{{title}}</h1>
    <span>{{content}}</span>
    <button @click="getSubassembly">获取子组件的方法</button>
    <subassembly @updateDialog="getSubassembly" :content="content" ref="mySubassembly"></subassembly>
  </div>
</template>
<script>
import {getCurrentInstance, reactive, ref, toRefs} from 'vue'
import subassembly from './subassembly'
export default {
  props: {
    content: Object
  },
  setup (props, context) {
    const mySubassembly = ref()
    console.log(props.content)
    let {ctx} = getCurrentInstance()
    // ctx 就是代表vue2.0的this
    const state = reactive({
      title: '我是父组件',
      content: {
        id: '1',
        name: '组织部'
      }
    })
    function getSubassembly() {
      mySubassembly.value.getSubassembly("调用子组件")
    }
    console.log(ctx)
    context.emit('updateDialog')
    return {
      getSubassembly,
      mySubassembly,
      ...toRefs(state)
    }
  },
  components: {
    subassembly
  }
}
</script>

子组件subassembly.vue

// An highlighted block
<template>
  <div>
    <h1>{{title}}</h1>
    <span>{{content}}</span>
    <button @click="getSubassembly">获取子组件的方法</button>
    <subassembly @updateDialog="getSubassembly" :content="content" ref="mySubassembly"></subassembly>
  </div>
</template>
<script>
import {getCurrentInstance, reactive, ref, toRefs} from 'vue'
import subassembly from './subassembly'
export default {
  props: {
    content: Object
  },
  setup (props, context) {
    const mySubassembly = ref()
    console.log(props.content)
    let {ctx} = getCurrentInstance()
    // ctx 就是代表vue2.0的this
    const state = reactive({
      title: '我是父组件',
      content: {
        id: '1',
        name: '组织部'
      }
    })
    function getSubassembly() {
      mySubassembly.value.getSubassembly("调用子组件")
    }
    console.log(ctx)
    context.emit('updateDialog')
    return {
      getSubassembly,
      mySubassembly,
      ...toRefs(state)
    }
  },
  components: {
    subassembly
  }
}
</script>