内容管理（九）01-编辑-地址栏传参跳转 & 频道（下拉列表选项）组件封装-准备 - 父子传值——vue子组件向父组件，使用$emit方法

12-内容管理-编辑-地址栏传参跳转

• http://localhost:8080/#/publish 发布文章 path:’/publish’
• http://localhost:8080/#/publish?id=100 编辑文章 path:’/publish’
• 确认传参使用query，因为想两个地址来到同一个组件，路由的规则是一样的。

 <el-button @click="$router.push('/publish?id='+scope.row.id)" type="primary" icon="el-icon-edit" circle plain></el-button>

13-内容管理-频道组件封装-准备

• v-model 是语法糖（简写了一些复杂代码）

  • 赋值 :value=“data”
  • 改值 @input=“data=$event” 触发这个事件的元素值

• v-model除了给表单元素使用，可以在任何组件使用。

  1、父组件可以使用 props 把数据传给子组件。
  2、子组件可以使用 $emit 触发父组件的自定义事件。

  • 父传子 props
  • 子传父 $emit(‘事件名称’，数据)
    • 父：组件给组件绑定自定义事件 <com-a @abc=“fn”>
    • 子：组件触发事件，this.$emit(‘abc’,‘数据’)

子传父：子组件给父组件传值——子数据在父组件页面进行渲染显示

1.在子组件中创建一个按钮，给按钮绑定一个点击事件

2.在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数

子组件：src/components/com-b.vue

<template>
  <div class='container'>COM-B <button @click="fn1()">提交数据给父组件</button> </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'COM-B的数据'
    }
  },
  methods: {
    fn1 () {
      // 提交数据给父组件
      this.$emit('abc', this.msg)
    }
  }
}

3.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

父组件:src/views/test/index.vue

<template>
  <div class='container'>
    {{parentMsg}}
    <com-b @abc="fn"></com-b>
  </div>
</template>

<script>
import ComB from '@/components/com-b'
export default {
  data () {
    return {
      parentMsg: ''
    }
  },
  methods: {
    // @abc 事件属于 com-b 的自定义事件
    // 遵循：事件给谁绑定，谁负责触发
    // fn 父组件申明  函数是可以传参
    fn (data) {
      // 事件对应函数
      this.parentMsg = data
    }
  },

代码解释：
1、在子组件中，首先需要使用$emit方法，该方法接收2个参数，第一个参数是事件的名称，自己随意定义。第二个参数是需要传递的数据，可以是对象，也可以是字符串类型。$emit是VUE实例中的一个方法，所以前面要加上this，可以在钩子函数中执行，也可以由某个事件触发执行。

2、在父组件中，程序会查找刚才在子组件中注册的事件名，该事件又有一个方法fn，fn方法将parentMsg的值改变了。

总结：

子组件向父组件传值成功 总结一下：

• 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
• 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
• 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。