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

This article mainly introduces Vue how to achieve communication between components, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Props

The parent component can pass data down to the child component through the props

Static Props

The purpose of passing a value is achieved by adding properties to the placeholder of the child component in the parent component

Dynamic Props

To dynamically bind the data of the parent component to the props of the child template in the template, similar to binding any ordinary HTML feature, with v-bind, whenever the data of the parent component changes, the change is transmitted to the child component

Props verification

You can specify validation rules for the props of a component. If the incoming data does not conform to the rules, Vue will issue a warning.

Props: {/ / basic type detection (`null` means any type is OK) propA: Number, / / multiple types propB: [String, Number], / / required and string propC: {type: String, required: true}, / / number Default values propD: {type: Number, default: 100}, / / default values of array / object should be returned by a factory function propE: {type: Object, default: function () {return {message: 'hello'} / / Custom verification function propF: {validator: function (value) {return value > 10}

Type can be (String,Number,Boolean,Function,Object,Array,Symbol) native constructor

Type can also be a custom constructor that uses instenceof detection

The prop is bound first, and when the property of the parent component changes, it will be passed to the child component, but not vice versa, to prevent the child component from inadvertently modifying the state of the parent component.

Modify prop data

When prop is passed in as an initial value, the subcomponent wants to use it as local data

Prop is passed in as the initial value, and the sub-components are processed into other data output

Note: objects and arrays in js are reference types that point to the same memory space. If prop is an object or array, changing it within the child component will affect the state of the parent component.

Method 1: at this time, you need to define a local variable and initialize it with prop, but the local variable can only accept the initial value of prop. When the value of the parent component changes, it cannot receive the latest value.

Processing method 2: define a calculation property, process the propvalue and return

Initial method 3: use variables to store the initial value of prop, and use watch to observe the change in the value of prop, and update the value of the variable when it changes

$emit

$emit ('custom time name', the data to be transferred) triggers an event on the current instance

Parent component

Import children from ". / children"; export default {name:'index', components: {Children}, data () {return {count:0}}, methods: {addCount (data) {this.count = data.count;}

Sub-component

Counter: {{count}} + + export default {name:'children', props: ['count'], / / to receive data passed by the parent component to the child component methods: {add () {/ / method to trigger the parent component this.$emit (' addCount', {count: count + 1});}

$on

$on ('event name', callback) listens for events and custom events on the current instance

Parent component

{{count}} import {bus} from'. / main.js'; import children from ". / children"; export default {name:'index', components: {Children}, data () {return {count:0}}, mounted () {bus.$on ('addCount', (val) = > {this.count++;})}}

Sub-component

Count+++import {bus} from'. / main.js';export default {name:'children', methods: {add () {/ / method that triggers the parent component bus.$emit ('addCount', {});}

Main file

Export var bus = new Vue ()

Note: events for emit and on must be on a public instance for events triggered by emit triggered by emit to be heard by on triggered by emit.

$parent (not commonly used)

Point to the root instance of the current component tree, and if the current instance does not have a parent instance, the instance will point to itself.

$parent can both accept and modify parent component data, which is bidirectional.

$parent can call the methods of the parent component

Sub-component

Trigger parent component sending method export default {name:'children', methods: {actionParent () {console.log (this.$parent.name); this.$parent.parentPrint (); / / trigger parent component method}

$children (not commonly used)

Points to the immediate subcomponents of the current instance and returns a collection of components.

It should be noted that children does not guarantee the sequence of certificates, nor is it responsive. If you show yourself that you are trying to use children, it does not guarantee the order, nor is it responsive. If you find yourself trying to use children, there is no guarantee of order, nor is it responsive. If you find yourself trying to use children for data binding, consider using an array with v-for to generate subcomponents and using Array as the real source.

For (let iTun0; I ({}),},}, thank you for reading this article carefully. I hope the article "how to realize the communication between components in Vue" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you 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.