[]
新建一个全局组件myevent，写一个输入框，通过输入框自带的input事件，写一个方法，获取到输入框里的内容
<template>
<view>
{{title}}
<view class="">
<input type="text" placeholder="请输入..." @input="oninput">
</view>
</view>
</template>
<script>
export default {
name:"myevent",
props: {
title: {
type: String,
default: "默认标题"
}
},
data() {
return {
};
},
methods:{
oninput(e){
console.log(e.detail.value);
}
}
}
</script>
<style lang="scss">
</style>
@input是uniapp的输入框自带方法，给他绑定一个方法，用于获取用户输入
通过$emit方法在公共组件自定义一个事件，这个事件用起来就和写系统提供的方法是一样的，在事件名前面加一个@符号即可，不同的是，自定义事件只能在自定义组件的标签中使用，在vue的标签中是不能用的
<template>
<view>
{{title}}
<view class="">
<input type="text" placeholder="请输入..." @input="oninput">
</view>
</view>
</template>
<script>
export default {
name:"myevent",
props: {
title: {
type: String,
default: "默认标题"
}
},
data() {
return {
};
},
methods:{
oninput(e){
console.log(e.detail.value);
// myenv就是自定义的事件名 onclick等就是系统提供的事件
// 第二个参数就是这个事件的值，这里暂时写死
// 只要这个自定义事件被触发,就会获取到这个事件的返回值123
this.$emit("myenv",123)
}
}
}
</script>
<style lang="scss">
</style>
oninput就是通过系统自带的@input方法获取用户输入，然后把值传递给下面定义的方法，onimput就是形参，下面定义的方法中的e就是接收的实参，这里是写死的123，把123换成e.detail.value，就是实际用户输入的数据了
在父组件中使用自定义方法：
本质就是在父组件中定义一个方法，然后通过一个自定义事件名把这个方法传递到子组件，子组件通过$emit接收到这个方法之后，把值给他，这样父组件就能通过这个方法接收到子组件传过来的值
@myenv = "onmyenv"@后面是在emit中自定义的方法名，onmyenv是在父组件这里定义的方法名，在methods中打印这个方法，会看到两个结果
<template>
<view>
<pubTitle :title = "title" subtitle="about page"></pubTitle>
<view class="">about页面</view>
<navigator url="../index/index" open-type="redirect">回到首页</navigator>
<navigator url="../list/list" open-type="redirect">回到列表页</navigator>
<myevent title="组件间传值" @myenv = "onmyenv"></myevent>
</view>
</template>
<script>
export default {
data() {
return {
title: "关于我们页面"
};
},
methods:{
onmyenv(e){
console.log(e);
}
}
}
</script>
<style lang="scss">
</style>
在关于页面的输入框里输入rr，会返回rr和123，rr就是父组件这里定义的方法获取到的值，而123就是自定义组件中返回的值
把自定义组件的方法中获取值的代码改成真正的获取用户输入,detail.value是vue这个顶级对象下自带的属性
methods:{
oninput(e){
// 打印用户输入的值
// console.log(e.detail.value);
// myenv就是自定义的事件名 onclick等就是系统提供的事件
// 第二个参数就是这个事件的值，这里暂时写死
// 只要触发这个自定义事件,就会获取到这个自定义的值123
this.$emit("myenv",e.detail.value)
}
}
在输入框中输入结果后，确实拿到了用户输入，看后面的数据来源，就是父组件about.vue，如果console没有注释掉的话，会同时打印两个一样的值，但是console那一行打印出来的值会显示来自子组件，而不是父组件：
子组件中的这个方法传值还可以传对象，例如获取用户输入和时间戳：
methods:{
oninput(e){
// 打印用户输入的值
// console.log(e.detail.value);
// myenv就是自定义的事件名 onclick等就是系统提供的事件
// 第二个参数就是这个事件的值，这里暂时写死
// 只要触发这个自定义事件,就会获取到这个自定义的值123
this.$emit("myenv",{value:e.detail.value,time:Date.now()})
}
}
这两个在子组件中的值，传递到了父组件
