In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-02-24 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/03 Report--
Editor to share with you what components of Vue2 communication, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!
Here is a list of the ways in which each component communicates
1. Props
The parent component transmits data to the child component, which should be the most common way
After the child component receives the data, the data of the parent component cannot be modified directly. An error is reported, so when the parent component is re-rendered, the data is overwritten. It is recommended to use computed if you want to modify it within a subcomponent
/ / Parent.vue transmit / / Child.vue receive export default {/ / use array receive props: ['msg'], / / write dual-use object receive You can limit the type of data received, set default values, validate, etc. Props: {msg: {type:String, default:' this is the default data'}}, mounted () {console.log (this.msg)},} 2. .sync
It can help us realize the two-way binding of the data passed by the parent component to the child component, so the child component can modify the data directly after receiving the data, and will modify the data of the parent component at the same time.
/ / Parent.vue export default {data () {return {page:1} / / Child.vueexport default {props: ["page"], computed () {/ / when we modify the currentPage in the subcomponent The page of the parent component will also change currentPage {get () {return this.page}, set (newVal) {this.$emit ("update:page", newVal)} 3. V-model
Similar to .sync, the data passed from the parent component to the child component can be bidirectionally bound, and the child component modifies the data of the parent component through $emit
/ / Parent.vue export default {data () {return {value:1} / / Child.vue export default {props: ["value"], / / you can modify the event name Default is input model: {event: "updateValue"}, methods: {handlerChange (e) {this.$emit ("input", e.target.value) / / if there is such a rename as above, this.$emit ("updateValue", e.target.value)}} 4. Ref
Ref if it is on a normal DOM element, the reference points to that DOM element
If on a child component, the reference points to the child component instance, then the parent component can actively obtain the properties of the child component or call the method of the child component through the ref
/ / Child.vueexport default {data () {return {name: "Muhua"}} Methods: {someMethod (msg) {console.log (msg)} / / Parent.vue export default {mounted () {const child = this.$refs.child console.log (child.name) / / Muhua child.someMethod ("method of sub-component called")}} 5. $emit / v-on
Child components send data to the parent component by dispatching events, or trigger operations such as parent component updates
/ / Child.vue dispatches export default {data () {return {msg: "this is a message to the parent component"}}, methods: {handleClick () {this.$emit ("sendMsg", this.msg)}} } / / Parent.vue response / / or abbreviated export default {methods: {getChildMsg (msg) {console.log (msg) / / this is the message received by the parent component} 6. $attrs / $listeners
When multi-tier nested components pass data, you can use this if you just pass data without intermediate processing, such as when the parent component passes data to the grandchild component
Attrs: contains a collection of non-props attributes in the parent scope except class and style. To get a collection of all the eligible attributes in the parent scope through this.$attrs, and then continue to pass them to other components within the child component, you can use vMedibind = "$attrs"
Listeners: contains a collection of listening events except .native in the parent scope. If you want to continue to pass it to other components within the subcomponent, you can use vMuon = "$linteners"
Use it in the same way
/ / Parent.vue {console.log ("this is the data received:", data)}, beforeDestroy () {/ / unlisten Bus.$off ("sendMsg")}} 10. Vuex
Vuex is the state manager, and centralized storage manages the state of all components. This piece of content is too long, if you are not familiar with the basic, you can see this Vuex, and then the general usage is as follows
Such as creating a file structure like this.
The content in index.js is as follows:
Import Vue from 'vue'import Vuex from' vuex'import getters from'. / getters'import actions from'. / mutations'import state from'. / state'import user from'. / modules/user'Vue.use (Vuex) const store = new Vuex.Store ({modules: {user}, getters, actions, mutations, state}) export default store
Then introduce in main.js:
Import Vue from "vue" import store from ". / store" new Vue ({el: "# app", store, render: h = > h (App)})
Then in the required usage components:
Import {mapGetters, mapMutations} from "vuex" export default {computed: {/ / method one and then through this. The attribute name can be used. MapGetters (["introducing attribute 1", "attribute 2" in getters.js]) / / method two. MapGetters ("user", ["attribute 1" in the user module, "attribute 2"])}, methods: {/ / method one and then through this. The property name can be used. MapMutations (["method 1", "method 2" in mutations.js]) / / method 2. MapMutations ("user", ["method 1" in the user module, "method 2"])}} / / or you can get this.$store.state.xxxthis.$store.state.user.xxx11 in this way. $root
$root can get the data and methods in App.vue
12. Slot
Is to transfer the data of the child component to the parent component through the slot, and then plug it back in.
/ / Child.vue export default {data () {return {user: {name: "Muhua"} / / Parent.vue {{slotProps.user.name}} these are all the contents of the article "what are the components of Vue2 Communication". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
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.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.