Single layer component communication

Prop

The scope of the component instance is isolated. This means that the parent component cannot (and should not) be referenced directly within the template of the child component
 Data. The data of the parent component can only be distributed to the child component through prop.

The subcomponent explicitly declares its expected data with the props option

Vue.component('child', {
  // Statement props
  props: ['message'],
  // Like data, prop can also be used in templates
  // You can also use this.message in the vm instance
  template: '<span>{{ message }}</span>'
})

And send him a message

<child message="hello!"></child>

props

props can be arrays or objects that receive data from the parent component. props can be a simple array, or
 Using objects as an alternative allows you to configure advanced options such as type detection, custom checksums, and set defaults

// Simple syntax
Vue.component('props-demo-simple', {
  props: ['size', 'myMessage']
})

// Object syntax, providing validation
Vue.component('props-demo-advanced', {
  props: {
    // Detection type
    height: Number,
    // Test type + other verification
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: function (value) {
        return value >= 0
      }
    }
  }
})

Follow the example

// assembly
<template id="my_div">
  <div>
    <h1>{{msg}}</h1>
    <img :src="imgsrc" alt="" width="200px">
  </div>
</template>

<script src="js/vue.js"></script>
<script>
// 1. Create components
Vue.component('my-div',{
  template: '#my_div',
  // vue does not support humps???
  props: ['msg', 'imgsrc']
});
new Vue({
  el: '#app',
  data: {

  }
});

// incoming message
<div id="app">
    <my-div msg="It's going to rain today" imgsrc="img/123.jpg"></my-div>
</div>

Multi layer component communication

Specific examples

Template

<template id="my_img">
  <div>
    <img :src="imgsrc" width="200px" alt="">
  </div>
</template>

<template id="my_title">
  <div>
    <h2>{{title}}</h2>
  </div>
</template>

<template id="my_parent">
  <div>
    <!--Dynamic binding-->
    <child2 :title="imgtitle"></child2>
    <child1 :imgsrc="imgsrc"></child1>
  </div>
</template>

register

<script src="js/vue.js"></script>
<script>
  // Instances of subcomponents
  let Child1 = Vue.extend({
    template: '#my_img',
    props: ['imgsrc']
  });
  let Child2 = Vue.extend({
    template: '#my_title',
    props: ['title']
  });
  Vue.component('my-parent', {
    props: ['imgtitle', 'imgsrc'],
    components: {
      'child1': Child1,
      'child2': Child2
    },
    template: '#my_parent'
  });
  new Vue({
    el: '#app',
    data: {
      title: 'What the fuck?!',
      img: 'img/123.jpg'
    }
  });
</script>

Call to send message

<div id="app">
  <!--Dynamic binding-->
  <my-parent :imgtitle="title" :imgsrc="img"></my-parent>
</div>

Design sketch