Parent component passes data to child component

Operating principle

1. Add custom attributes to child components in the parent component

2. The child component internally receives the custom properties added by the parent component to the child component through props

Matters needing attention

1. Define the custom properties needed by our component in props first

2. When using a component, pass custom properties as required by the component

3. Custom property values can be numbers, strings, Booleans, arrays, objects, functions.

4. The data to be transmitted can be accessed in the same way as its own data. Methods, lifecycle functions, computed properties, and so on are accessed through this.

5. The child components can only access the data transferred from the parent component to the child component.

Code case

<luhuanyu :title="msg"></luhuanyu> <script> Vue.component('luhuanyu', { props: ['title'], data: function() { return { msg: '' } }, template: '<div>{{title}}</div>' }); Var vm = new Vue({el: '#app', data: {MSG: 'I am the parent'}}) </script>Copy the code

2. Child component passes data to parent component

Operating principle

1. Bind custom events to child components in the parent component

2. The child component fires the event internally via $emit(custom event name, parameter)

3. When a user-defined event is triggered, the corresponding function is executed and the parameters are passed.

Matters needing attention

1.$emit () can be executed through the handles function or through the lifecycle, but is preceded by this

2. When a parent component receives a parameter for a custom event bound to a child component, it uses $event or does not write it.

Code case

< div id = "app" > < div > parent component - {{FMSG}} < / div > < son @ trans = 'handle' > < / son > < / div > < template id = "temp" > < div > The < div > child components - {{Smsg}} < / div > < button @ click = '$emit (" trans ", Smsg)' > passed to the parent component < / button > < / div > < / template > < script SRC ="./js/vue.js"></script> <script> Vue.component('son',{data:function(){return {Smsg:' I am a child of the data '}}, template:'#temp' }) var vm = new Vue({ el:'#app', data:{ fmsg:'' }, methods:{ handle:function(val){ this.fmsg=val } } })Copy the code

3. Data transfer between sibling components

Operating principle

1. Data transfer between sibling components requires the help of the event center, through which data transfer

Var hub = new Vue()

$emit(method name, data to be sent)

/ / Locate (){/ / locate (){/ / locate (){/ / locate (){/ / locate (){

5. The destruction event cannot be transmitted after being destroyed by hub.$off()

Code sample

Vue.component('bro1', {data: function () {return {msg1: 'I am a data ', gmsg1:'}}, template: ` < div > < div > {{gmsg1}} < / div > < div > < button @ click = 'add' > click 1 < / button > < / div > < / div > `, the methods: {the add: function () { bus.$emit('bro2-event', this.msg1) } }, mounted() { bus.$on('bro1-event', (val) => {this.gmsg1 = val})}}) Vue.component('bro2', {data: function () {return {msg2: 'I am gmsg2 ', gmsg2: "'}} template: ` < div > < div > {{gmsg2}} < / div > < div > < button @ click = 'add' > click 2 < / button > < / div > < / div > `, the methods: {the add: function () { bus.$emit('bro1-event', this.msg2) } }, mounted() { bus.$on('bro2-event', (val) => { this.gmsg2 = val }) } }) var vm = new Vue({ el: '#app', data: { }, methods: { } })Copy the code

Never work overtime, come on