vue中emit的使用方法,vue中prop的用法
本文主要介绍了vue的prop和$emit的使用说明，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
Prop和$emit的用法。1.vue组件Prop传输数据。2.子组件可以使用$emit来触发父组件的自定义事件。今天的坑——这个。$ emit我的实现方法效果问题在这里，问题解决了。
prop与$emit的用法
1.vue组件Prop传递数据
实例的作用域是隔离的，这意味着父组件的数据不能在子组件的模板中直接引用。如果希望子组件使用父组件的数据，需要使用子组件的prop选项。Prop是单向绑定。当父组件的属性改变时，它将被传递到子组件，但反过来。这主要是为了防止子组件无意中修改父组件的状态；每次更新父组件时，子组件的所有属性都会更新为最新值。这意味着您不能在子组件中更改属性。
2.子组件可以使用$emit触发父组件的自定义事件
Vm。$emit( event，arg):发送数据。第一个参数是发送数据的名称，接收时也用这个参数接收。第二个参数是这个数据的当前位置，拓展：。
Vm。$on( event，fn):接收数据。第一个参数是数据的名称，它对应于数据发送时的名称。第二个参数是一个方法，需要对数据进行操作。注意：vue模板只能有一个根对象(只能用一个标签来包装模板中的所有元素)，否则会报告如下错误：
组件模板应该只包含一个根元素。如果您在多个元素上使用v-if，请使用v-else-if来链接它们。
父组件：
模板
差异
添加名称：{{addrname}}/div的父组件的div
child-prop @ showAddrName= updateAddrName :send data= addrName /child-prop
/div
/模板
脚本
从导入childProp。/child prop ；
导出默认值{
名称：“索引”，
组件：{childProp}，
data () {
返回{
AddrName:“北京”
}
},
方法：{
UpdateAddrName(data){//触发子组件城市选择-城市选择的事件。
console.log(数据)；
this . addrname=data . addrname；//更改了父组件的值
console . log( to city: this . addrname)
}
}
}
/脚本
子组件：
模板
差异
从父组件传递到子组件的H3地址名称：{{senddata}}/H3
br/button @ Click= addr(` Shanghai `) 单击此处将 Shanghai 启动到父组件/button
/div
/模板
脚本
导出默认值{
名称：“儿童道具”，
Props:[sendData]，//用于接收父组件到子组件的数据。
方法：{
地址(值){
let data={
地址：瓦尔
};
这个。$emit(showAddrName ，data)；//触发//select事件后，会自动触发showCityName事件。
}
}
}
/脚本
今天遇到的坑--this.$emit
写给赶时间的人
简言之
这个。$emit(xxx ，input)，输入最好是字符串。如果您需要传递一个对象，那么，建议您将它放在父组件JSON.parse(input)中，或者不传递原始对象。您需要const作为对象，并对需要传递的对象进行深层复制。
写给有点时间看的人
作为一个半路出家的伪前端，遇到坑，基本是因为基础知识不扎实。比如我就遇到了这个这个的坑。$emit today。
需求
一个简单的要求，页面上方有一个搜索框，需要填写2个字段，按OK即可搜索。
实现
我也这么认为填写两个字段，然后我将它们写在一个对象中。当这个。$emit，只传递这个对象的值。
我的实现方法
搜索组件
模板
差异
div搜索/div
输入类型= text v-model= search key . key _ apple
输入类型= text v-model= search key . key _ blackBerry
按钮@click=onSubmit 确定/按钮
/div
/模板
脚本
导出默认值{
data() {
返回{
搜索关键字：{
key_blackBerry: ，
key_apple:“”
}
};
},
方法：{
onSubmit() {
这个。$emit(onSearchSubmit ，this . search key)；
}
}
};
/脚本
父组件：
模板
section class=container
差异
search @ onSearchSubmit= onSearchSubmit /
h1{{parent_search}}/h1
/div
/部分
/模板
脚本
从“~/components/Search.vue”导入搜索；
导出默认值{
组件：{
搜索
},
data() {
返回{
parent_search: {}
};
},
方法：{
onSearchSubmit(输入){
this.parent_search=输入；
}
}
};
/脚本
效果
其实可以满足要求。但是，有一个意想不到的结果：第一次点击确定后，我们在搜索框中输入。预期的结果是什么都不改变，例如，h1中的字符不会改变。然而，事实证明，双向绑定并不是我想要的.没有实现父子组件的双向绑定(比如通过复制组件的change方法)。
问题来了，问题解决
原因是我写的这个组件。$emit是一个对象，但它的地址实际上是被传输的。
所以，以后像这样重写子组件是可以的。
模板
差异
div搜索/div
输入类型= text v-model= search key . key _ apple
输入类型= text v-model= search key . key _ blackBerry
按钮@click=onSubmit 确定/按钮
/div
/模板
脚本
导出默认值{
data() {
返回{
搜索关键字：{
key_blackBerry: ，
key_apple:“”
}
};
},
方法：{
onSubmit() {
const input=JSON . parse(JSON . stringify(this . search key))；
这个。$emit(onSearchSubmit ，输入)；
}
}
};
/脚本
基础真的很重要~
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。