Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to use prop and $emit in vue". In daily operation, I believe many people have doubts about how to use prop and $emit in vue. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to use prop and $emit in vue". Next, please follow the editor to study!

The use of prop and $emit the 1.vue component Prop transfers data

The scope of the component instance is isolated, which means that the data of the parent component cannot be directly referenced in the template of the child component. If you want the child component to use the data of the parent component, you need to use the prop option of the child component; prop is one-way bound, and when the property of the parent component changes, it will be passed to the child component, but not vice versa; this is mainly to prevent the child component from unintentionally modifying the state of the parent component Each time the parent component is updated, all prop of the child component is updated to the latest value. This means that you cannot change the prop within the subcomponent.

two。 A child component can use $emit to trigger a custom event for the parent component

Vm.$emit (event, arg): send data. The first parameter is the name of the data sent and received with this parameter. The second parameter is the current location of the data.

Expand:

Vm.$on (event, fn): receives the data. The first parameter is the name of the data, which corresponds to the name when it was sent. The second parameter is a method to operate on the data.

Note: the vue template can only have one root object (only one tag can be used to wrap all elements in template), otherwise it will report an error such as:

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

Parent component:

AddName of the parent component: {{addrName}} import childProp from ". / childProp"; export default {name:'index', components: {childProp}, data () {return {addrName: "Beijing"}}, methods: {updateAddrName (data) {/ / trigger subcomponent city selection-event console.log of the selected city (data); this.addrName = data.addrName / / changed the value of the parent component console.log ('toCity:'+this.addrName)}

Subcomponents:

AddrName passed by parent component to child component: {{sendData}} Click here to transmit 'Shanghai' to parent component export default {name:'childProp', props: ["sendData"], / / to receive data passed by parent component to child component methods: {addr (val) {let data = {addrName: val}; this.$emit ('showAddrName',data) / / after the select event is triggered, automatically trigger the showCityName event} the pit encountered today-this.$emit

Write to people in a hurry.

In a word

This.$emit ('xxx', input), input is preferably a string. If you need to pass an object, it is recommended that you JSON.parse (input) in the parent component, or do not pass the original object. You need to const an object and make a deep copy of the object you need to pass.

Write to someone who has some time to read it.

As a pseudo-front-end who became a monk halfway, he encountered a pit basically because his basic knowledge was not solid. For example, he encountered this pit of this.$emit today.

Demand

A simple requirement, there is a search box on the page, which needs to fill in 2 fields, press OK to search

Realize

Here's what I think. Fill in two fields, and I'll write them in an object. When I this.$emit, just pass the value of this object.

My method of implementation

Search component

Search determines export default {data () {return {searchKey: {key_blackBerry: ", key_apple:"}};}, methods: {onSubmit () {this.$emit (" onSearchSubmit ", this.searchKey);}

Parent component:

{{parent_search}} import Search from "~ / components/Search.vue"; export default {components: {Search}, data () {return {parent_search: {};}, methods: {onSearchSubmit (input) {this.parent_search = input;}}; effect

In fact, it can also meet the requirements, but there is an unexpected result: when we click OK for the first time, we enter it in the search box, and the expected result is that nothing has changed, for example, the characters in H2 will not change, but, as a result, it is found that it is bound in both directions, which is not the result I want. I did not implement bidirectional binding between parent and child components (for example, by overriding the change method of the component)

Here comes the problem. Problem solved.

The reason for this is that what I wrote from the component this.$emit is an object, but actually passes its address.

So, if you rewrite the subcomponents in this way, you will ok.

Search determines export default {data () {return {searchKey: {key_blackBerry: ", key_apple:"}};}, methods: {onSubmit () {const input = JSON.parse (JSON.stringify (this.searchKey)); this.$emit (" onSearchSubmit ", input);} At this point, the study on "how to use prop and $emit in vue" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.