Vue，如何在JSX render中的props中传递函数？
Vue，如何在JSX render中的props中传递函数？
提问于 2018-06-08 04:51:42
我的组件如下所示：
App.jsx
import MyInput from './MyInput';
const onChangeHandler = (val) => {
console.log(val);
};
export default {
render() {
return (
<MyInput onChange={onChangeHandler} />
);
},
};和MyInput.jsx
export default {
props: {
onChange: {
type: Function,
},
},
render() {
// as Sphinx suggested it should be this.$props.onChange
return (
<input onChange={this.$props.onChange} />
);
},
};但是this.onChange是未定义的：
如何在MyInput组件中正确使用this.onChange prop？
CodePen
在这里你可以找到我的问题的实现的CodePen：https://codepan.net/gist/13621e2b36ca077f9be7dd899e66c056
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-08 17:37:39
道具名称不要以on开头。保留中的“on”前缀。
Stack Overflow用户
发布于 2018-06-08 05:08:44
检查Vue API: instance property=$props，你应该像下面的演示一样使用_this.$props：
Vue.config.productionTip = false
Vue.component('child', {
props: {
onChange: {
type: Function,
default: function () {console.log('default')}
},
},
render: function (h) {
let self = this
return h('input', {
on: {
change: function (e) {
var test;
(test = self.$props).onChange(e)
}
}
})
}
})
Vue.component('container1', {
render: function (h) {
return h('child', {
props: {
onChange: this.printSome
}
})
},
methods: {
printSome: function () {
console.log('container 1 custom')
}
}
})
Vue.component('container2', {
render: function (h) {
return h('child', {
props: {
onChange: this.printSome
}
})
},
methods: {
printSome: function () {
console.log('container 2 custom')
}
}
})
new Vue({
el: '#app'
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<h3>Container 1</h3>
<container1></container1>
<h3>Container 2</h3>
<container2></container2>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50749988
复制相关文章
相似问题