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

This article mainly explains "how to use vue to set up communication". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "the way of using vue to build communication".

Catalogue

I. component communication

1. Props parent component-> child component communication

2. $emit child component-> parent component pass

3. Bus (event bus) sibling component communication

4. $parent and $children directly access the component instance

5. $refs

6. Provide/inject (provide / inject) multi-component or deep-level component communication

7. Slot (slot-scope scope slot) child element-> parent element (similar to communication)

8. Vuex state management

1. Component communication 1. Props parent component-> child component communication

Parent component-property to pass values to child components

Sub-component-props mode to receive data

Import Son from'@ / components/son' export default {name:'Father', components: {Son}, data () {return {fData:' I am the value passed from the parent component to the child component-props mode'}

The parameter name accepted by the child component props should be the same as the property name defined when the parent component is passed

I am the data of the parent component: {{fData}} I am the parent component passing the modified data: {{mydata}} export default {name:'Son', props: {fData: {type:String, default:''}} data () {mydata:this.fatherData}, methods: {changeData () {this.mydata + = 'change data'}} }

Note:

Child components cannot directly modify the value passed by the parent component: because of the one-way data flow mechanism of Vue, if you modify the value of the parent component directly, it will be "contaminated". (props is one-way bound (read-only property): when the property of the parent component changes, it is passed to the child component, but not vice versa)

The error message is about: vue uses prop to communicate error: Avoid mutating a prop directly since the value will be overwritten whenever the parent

Solution: you can define a variable mydata within the subcomponent to receive fData data

Parameter passing type uncertainty can be written as follows:

Props: {fData: {type: [String,Number], default:''}} 2, $emit child component-> parent component pass

Child component binding custom event

The first parameter of $emit () is the custom event name, and the second parameter is the data to be passed.

Use $emit () to trigger changes to the data subcomponent

Change the parent component export default {name:'Son', methods: {handleEmit () {this.$emit ('data of the triggerEmit',' child component')}

Parent component (the event name sent by the child component should be the same as the event name accepted by the parent component)

Import Son from'@ / components/son' export default {name:'Father', components: {Son}, methods: {changeData (name) {console.log (name) / / = > I am the data from the subcomponent}

$emit and props combine sibling components to pass values

The parent component introduces two child components

The parent component acts as a bridge and acts as the parent component

Export default {data () {return {name: 'Hello data'}}, methods: {editName (name) {this.name = name}

Subcomponent B changes to receive data

Name: {{myName}}

Modify the name export default {props: {myName:String}, methods: {changeName () {this.$emit ('changeName',' new data name')}

Subcomponent A receives data

Name: {{newName}}

Communication between export default {props: {myName:String}} 3 and bus (event bus) sibling components

Values are passed between non-parent-child components or more inter-level components, which are managed through separate event centers in Vue

Create a public bus.js file

Expose Vue instance

Passing the data side, triggering the bus.$emit through an event (method name, passed data)

The receiving data side, in the lifecycle function, listens through bus.$on (method name, [params])

Destroy event, cannot listen for data after receiving data and destroying through bus.$off (method name)

Import Vue from "vue" const bus=new Vue () export default bus

Define the call in the component that needs to change the data

I am Communication component A to modify the name import bus from "@ / utils/Bus.js"; export default {components: {}, data () {return {};}, mounted () {console.log (bus);}, methods: {changeName () {bus.$emit ("editName", "dataset!") ;},}

Another component also introduces the bus.js file to listen for event callback through $on

Name: {{name}} I am the communication component B import bus from "@ / utils/Bus.js"; export default {components: {}, data () {return {name};}, mounted () {bus.$on ("editName", (name) = > {this.name=name console.log (name); / /});}, methods: {},}; 4, $parent, $children directly access the component instance

The child component gets the parent component instance through-> $parent

The parent component gets the array of child component instances through-> $children

Child components-this.$parent can obtain the methods of the parent component, data data, etc., and can be used and executed directly

I am export default {name: "Son", data () {return {sonTitle:'I am the data of the subcomponent'}}, methods: {sonHandle () {console.log ('I am the method of the subcomponent')}} Created () {console.log (this.$parent) console.log (this.$parent.fatherTitle) / / = > I am the data this.$parent.fantherHandle () / / = > I am the method of the parent component}}

Parent component-gets the child component instance, and the obtained instance is in the form of an array before this.$children [0] can get a component instance and call component methods and data

I am the parent component import Son from'. / son.vue'export default {name: 'father', components: {Son}, data () {return {fatherTitle:' I am the data of the parent component'}}, methods: {fantherHandle () {console.log ('I am the method of the parent component')}} Mounted () {console.log (this.$children) console.log (this.$children [0] .sonTitle) / / = > I am the data of the subcomponent this.$children [0] .sonHandle () / / = > I am the method of the subcomponent} 5, $refs

Ref is used to register reference information with elements or subcomponents. The reference information will be registered on the $refs object of the parent component.

The parent component uses $refs to get the component instance

Import Son from'. / son.vue'export default {name: 'father', components: {Son}, mounted () {console.log (this.$refs.son) / * component instance * /}} 6, provide/inject (provide / inject) multi-component or deep component communication

Provide/inject detailed explanation

The parent component uses provide to inject data

Subcomponents use inject to work with data

/ * parent component * / export default {provide: {return {provideName: 'selling the front end'}

At this point, the variable provideName can be provided to all its child components, including great-grandchildren and grandchildren. You only need to use inject to get the data.

/ * Sub-component * / export default {inject: ['provideName'], created () {console.log (this.provideName) / / = > "selling frontend"}}

The parent component does not need to know which component uses the data it provides

Sub-attachments do not need to know where this data comes from

7. Slot (slot-scope scope slot) child element-> parent element (similar to communication)

Used as a reusable template to replace elements that have been rendered

In a subcomponent, you simply pass the data to the slot, just as you pass the prop to the component

Note: the content received by the parent slot is the outermost element and must have an attribute slot-scope child element

Export default {components: {}, data () {return {arrList: [1jinaqiangjia']};}, mounted () {}, methods: {},}

Parent element

Aa {{item}} import SonG from'.. / components/SonG.vue'export default {components: {SonG}, data () {return {}} 8, vuex status Management

The equivalent of a warehouse of public data.

Provide some ways to manage warehouse data

Import Vue from 'vue'import Vuex from' vuex'Vue.use (Vuex) export default new Vuex.Store ({state: {}, mutations: {}, actions: {}, modules: {}}) so far, I believe you have a better understanding of "how to use vue to build communications". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.