vue中组件间的数据传递及事件处理

vue属性传递, 事件触发

1.父传子属性

• 子页面js中定义一个属性

export default {
    
    
    name: 'About',
    components: {
    
    },
    props: {
    
    
        // 业务id
        test: {
    
    
            required: false,
            type: [Number]
        }
    },
...
}

• 父页面使用已注册的组件赋值

<About :test="123"></About>

2.父触发子事件

• 父使用$refs.comp调用子组件事件

<About :test="123" ref='comp'></About>

– 父调用子组件事件

this.$refs.comp.xxx([参数]);

3.子传父

使用子触发父事件方式传参, 或者父组件直接使用v-model进行双向绑定, 当子组件修改属性时, 父属性也会变化

4.子触发父事件

• 子组件调用事件emits:

声明事件
export default {
    
    
	name: 'Line5',
	components: {
    
    },
	props: {
    
    
		// 业务id
		aergtaerg: {
    
    
			required: false,
			type: [Number]
		}
	},
	emits: ['my-event'], // 声明一个my-event事件
...
}

子组件方法中触发事件
testHandler() {
    
    
    this.$emits('my-event', 'args');
},

• 父组件使用事件

父组件中使用事件
<About @my-event="myEventHandler"></About>

父组件中定义事件处理程序
methods: {
    
    
    myEventHandler(e) {
    
    
        console.log(e)
    }
}