Vue中事件绑定与监听（父、子组件数据传递）

1、说明

        在vue中通常会在组件之间进行参数传递，而对于子组件参数传递给父组件，通常需要props属性指定传入的函数，这种方式有些繁琐，这种情况下，可以通过绑定监听事件进行解决。

2、子组件向父组件传参

2.1、使用props方式

2.1.1、子组件定义

<template>
  <div>
    <button @click="deleteAll">清除所有</button>
  </div>
</template>

<script>
import {toArray} from "core-js/internals/async-iterator-iteration";

export default {
  name:'Test',
  methods: {
    toArray,
    deleteAll(){
      if (confirm('确认要删除已经完成的?')){
        // 调用test函数
        this.test()
      }
    }
  },
  data(){
    return {

    }
  },
// 引入test函数
  props:['test']
}
</script>

2.1.2、父组件定义

<template>
  <div>
      <Test :test="test"/>
  </div>
</template>

<script>
//引入组件
import Test from './components/Test.vue'

export default {
  name: 'App',
  components: {
    // 给组件起名字，标签引入使用自定的名字
    Test:Test
  },
  methods:{
// 当子组件调用test，则会走此test
    test(){
      return null
    }
  }
}
</script>

2.2、使用 @/v-on: 方式实现

2.2.1、子组件实现方式

<template>
  <div>
    <button @click="deleteAll">清除所有</button>
  </div>
</template>

<script>
import {toArray} from "core-js/internals/async-iterator-iteration";

export default {
  name:'Test',
  methods: {
    toArray,
    deleteAll(){
      if (confirm('确认要删除已经完成的?')){
        // 指定绑定的事件
        this.$emit('test')
      }
    }
  },
  data(){
    return {

    }
  },
// 引入test函数
// props:['test']  // 此时不需要props了
}
</script>

2.2.2、父组件实现方式

<template>
  <div>
// 使用@ 或者v-on: 定义自定义事件
      <Test @test="test"/>
  </div>
</template>

<script>
//引入组件
import Test from './components/Test.vue'

export default {
  name: 'App',
  components: {
    // 给组件起名字，标签引入使用自定的名字
    Test:Test
  },
  methods:{
// 当子组件调用test，则会走此test
    test(){
      return null
    }
  }
}
</script>

2.3、使用ref方式实现

        注：ref用于给节点打标识，标明组件唯一性。

 2.2.1、子组件实现方式

<template>
  <div>
    <button @click="deleteAll">清除所有</button>
  </div>
</template>

<script>
import {toArray} from "core-js/internals/async-iterator-iteration";

export default {
  name:'Test',
  methods: {
    toArray,
    deleteAll(){
      if (confirm('确认要删除已经完成的?')){
        // 指定绑定的事件
        this.$emit('test')
      }
    }
  },
  data(){
    return {

    }
  },
// 引入test函数
// props:['test']  // 此时不需要props了
}
</script>

2.2.2、父组件实现方式

<template>
  <div>
      <Test ref="testref"/>
  </div>
</template>

<script>
//引入组件
import Test from './components/Test.vue'

export default {
  name: 'App',
  components: {
    // 给组件起名字，标签引入使用自定的名字
    Test:Test
  },
  methods:{
// 当子组件调用test，则会走此test
    test(){
      return null
    }
  },
  mounted(){
    this.$refs.testref.$on('test',this.test)
  }
}
</script>

3、父组件向子组件传参

        父组件向子组件传参使用props方式，主要有以下三种：

3.1、简单方式

// 1、父组件定义 参数名=参数值
<Test name="Myname" :age=18 />  // 如果不加:，无论传递什么都是表示字符串，加冒号（:），表示传递的参数值是表达式计算出来的。
// 2、子组件定义
<script>
    export default{
        data(){
            return {
            }
        },
        // 获取父组件中的参数(通过参数名获取，在使用的时候使用 this.参数名引用(例如：this.name))
        props:['name','age']
    }
</script>

3.2、指定名称和类型

// 1、父组件定义 参数名=参数值
<Test name="Myname" :age=18 />  // 如果不加:，无论传递什么都是表示字符串，加冒号（:），表示传递的参数值是表达式计算出来的。
// 2、子组件定义
<script>
    export default{
        data(){
            return {
            }
        },
        // 获取父组件中的参数(通过参数名获取，在使用的时候使用 this.参数名引用(例如：this.name))
        props:{
            name:String,
            age:Number
        }
    }
</script>

 3.3、指定名称、类型、是否必传、默认值

// 1、父组件定义 参数名=参数值
<Test name="Myname" :age=18 />  // 如果不加:，无论传递什么都是表示字符串，加冒号（:），表示传递的参数值是表达式计算出来的。
// 2、子组件定义
<script>
    export default{
        data(){
            return {
            }
        },
        // 获取父组件中的参数(通过参数名获取，在使用的时候使用 this.参数名引用(例如：this.name))
        props:{
            name:{
                type:String,   // 设置参数类型
                required:true,  // 设置是否必传
                default:''      // 设置默认值（此字段和是否必传只填一个即可）
            }
        }
    }
</script>

4、总结

         本文介绍父子组件之间如何传递参数，如何自定义组件，这是vue中的基础，学会了这些能够使用前端编写一些嵌套页面。