|
搭建好实例后 发现子组件可以触发父组件上的方法 却无法传递参数? ?触发的事件中 接收的参数均为undefined
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<My-Com1 :parentMsg='msgFatehr' @func='show()'></My-Com1>
</div>
<template id="temp">
<div>
{{msgChild}}-------{{parentmsg}}
<input type="button" value="点我触发事件" @click='logsome(1234,123)'>
</div>
</template>
</body>
<script>
let vm = new Vue({
el: "#app",
data() {
return {
msgFatehr: '我是父组件中的数据'
}
},
methods: {
show(data1, data2) {
console.log('show' + data);
}
},
components: {
//默认情况子组件访问不到父组件中的数据
MyCom1: {
template: '#temp',
props: ['parentmsg'],
data() {
return {
msgChild: '我是子组件中的数据'
}
},
methods: {
logsome() {
this.$emit('func', 123, 143);
}
},
}
}
})
</script>
</html>
解决方案:? 将父组件中My-com1上的:func绑定的方法show（）去掉括号就实现了传参的功能
|