zoukankan      html  css  js  c++  java
  • vue中子组件使用$emit传值的种种情况

    1、 子组件不传递参数,父组件也不接受参数

    // 子组件
    this.$emit('test')
    // 父组件
    @test='test'
    
    test() {
        
    }

    2、 子组件传递一个参数,父组件接收时不带形参

    // 子组件
    this.$emit('test','哈哈')
    // 父组件
    @test='test'
    
    test(param) {
    	console.log(param); // 哈哈
    },

    3、 子组件传递多个参数,父组件接收时需要使用arguments作为形参。arguments是一个数组。

    // 子组件
    this.$emit('test','哈哈1','哈哈2')
    // 父组件
    @test='test(arguments)'
    
    test(params) {
    	console.log(params[0]); // 哈哈1
     	console.log(params[1]); // 哈哈2
    },

    4、 子组件传递一个参数,父组件在接收参数时还加上了自己的一个属性,那么父组件需要使用形参$event 来替代子组件传递的参数。

    // 子组件
    this.$emit('test','哈哈')
    // 父组件
    @test='test('呵呵',$event)'
    test(myparam,param) {
         console.log(myparam); // 呵呵
         console.log(param); // 哈哈
    },

    5、 子组件传递多个参数时,父组件在接收参数时还加上了自己的一个属性,那么父组件需要使用形参arguments 来替代子组件传递的多个参数。

    // 子组件
    this.$emit('test','哈哈1','哈哈2')
    // 父组件
    @test='test(arguments,'哈哈3')'
    test(params,myparam) {
         console.log(params[0]); // 哈哈1
         console.log(params[1]); // 哈哈2
         console.log(myparam); // 哈哈3
    },
  • 相关阅读:
    javascript初识
    css定位及叠放次序
    css精灵图
    css元素的显示及隐藏、文字隐藏
    css浮动
    盒子模型的边框、内边距、外边距、阴影
    css背景
    css中的显示与隐藏
    css定位
    css的布局与版心布局
  • 原文地址:https://www.cnblogs.com/lvonve/p/14180258.html
Copyright © 2011-2022 走看看