Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities.
This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money
Hello! Dear friends of the Nuggets, I wrote a technical article about # Vue export import yesterday. I hope you can preview it and give me more suggestions and support. Thank you! Today’s article is about the various methods of transferring values between VUE components; On the Internet to find a lot of relevant articles or documents summed up; Hopefully useful to you;
The text begins ~
Parent component passing value to child component (most used)
implementation
1. In Vue, the parent component can use props to pass data to the child component. (data type can be a Number, a String, Boolearn, Array, Object)
Subcomponent section codedialog.vue
<template> <div> <h2> <div v-if="showCode" class="Qr"> <img: SRC ="currentInfo.code_img" Alt ="" > <h5>{{ currentInfo.nickname }}</h5> </div> <div> <span>{{ num }}</span> <span>{{ content }}</span> </div> <div> <span v-for="(item, index) in isArray" :key="index">{{ item }}</span> </div> </div> </template> <script> export default { props: { showCode: { type: Boolean, default: false }, num:{ type:Number, defalut:0 }, content:{ type:String, defalut:'' }, currentInfo: { type: Object, default: () => {} }, isArray:{ type:Array, defalut: ()=> [] } } } </script>Copy the code
The parent component part index.vue
<template> <div> <h1> Parent component </h1> <code-dialog :num="num" :context="context" :showCode="isShow" :isArray="isArray" :currentInfo="currentInfo" /> <! -- <code-dialog ></code-dialog> --> </div> </template> <script> import codeDialog from '.. /.. /components/codeDialog.vue' export default { components: { codeDialog }, data(){ return{ num:2, context: "Introduction of subcomponents," isShow: true, isArray: [" beans, red beans, mung beans, black beans, peas, "], currentInfo: {nickname: "love guest customer service commissioner," code_img: require("@/assets/img/consult/07.png") } } } } </script>Copy the code
rendering
The preview looks like this
Child components pass values to parent components
implementation
In Vue, a child component can use $emit to pass data to its parent
Subcomponent part
<template> <div> <h2> <img @click="childEvent" : SRC ="currentInfo.code_img" Alt ="" > </div> </template> <script> Export default {methods:{childEvent(){this.$emit('showClick',' child to parent ')}}} </script>Copy the code
Parent component part
<template> <div> <h1> <child :num="num" :context="context" :showCode="isShow" :isArray="isArray" :currentInfo="currentInfo" @showClick="showText" /> <div>{{message}}</div> </div> </template> <script> export default { data(){ return{ message:'' } }, methods:{ showText(e){ this.message=e } } } </script>Copy the code
rendering
Bus. Js spread value
Implementation method:
You need the same VUE instance to call both methods, so create a hub; Use bus.emit to emit, bus.emit to emit, bus.emit to emit, bus.on to receive
Application scenarios
The method that one page calls another page
It can also be used to pass values to sibling components
For example, my order module similar to Taobao or Pinduoduo will enter certain order list to confirm receipt of goods from order status classification on the first-level page; Then exit to update the display of unconfirmed received quantities;
(1) Create a bus.js file
import Vue from 'vue';
export defalut new Vue ;
Copy the code
(2) The page that needs to trigger the value transfer is removed from this page
< the template > < div > < h2 > from this page to leave (triggered by value) < / h2 > < div class = "Qr" > < img SRC = ".. PNG "Alt ="" /> </div> </div> </template> <script> import bus from './bus' export default {data(){return{} {}, beforeDestroy () bus $emit (' MSG ', 'I will value a another page')},} < / script >Copy the code
(3) The page that needs to receive the value goes from this page to the above page; Return to this page
< the template > < div > < h1 @ click = "$router. Push ('/child ')" > receive from another page value < / h1 > < div > {{message}} < / div > < / div > < / template > <script> import bus from "./bus"; export default { data() { return { message: "" }; }, created() { bus.$on("msg", (val)=>{ this.message = val }); }}; </script>Copy the code
rendering
Take a look at the effect picture of the transfer process
Sibling component method call
implementation
Introduce two child components (child,child1) in the parent component, and call a method in the child component in child1
Echo this.$emit(‘fun’) to the parent in child1
In the parent component, bind the child component with a ref =”childFirst” attribute
Define the function method in methods to make this.$refs.childfirst. A method ()
Parent component part
<template>
<div>
<div>{{ message }}</div>
<child ref="childFrist"></child>
<child1 @save="save"></child1>
</div>
</template>
<script>
import child from "./child.vue";
import child1 from "./child1.vue"
export default {
components:{
child,
child1
},
methods:{
save(){
this.$refs.childFrist.fristEvent()
}
}
};
</script>
Copy the code
Subcomponent part
Child component <template> <div> <h2> The first child </h2> </div> </template> <script> export default {methods:{fristEvent(){ Console. log(' first child; Here the list interface method is usually called '); }, }} < / script > -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- child1 component part of < the template > < div > </h2> <div class="Qr" @click="imgClick"> <img SRC =".. PNG "Alt ="" /> </div> </div> </template> <script> export default{methods:{imgClick(){this.$emit('save')} } } </script>Copy the code
rendering
conclusion
Good article to the end of this again, feel that every time they write a new technical article, is equal to the article’s front-end knowledge review again; I have a bad memory and always forget grammar; To put it bluntly, to forget grammar is to use it less; Hope to write this article useful to you; We also hope that you can give more suggestions and support; Thank you very much!
“Welcome to the discussion in the comments section. The excavation authorities will draw 100 nuggets in the comments section after project Diggnation. See the event article for details.”