Definition of parent and child components

The official website of vue has written some definitions about parent-child components and the transfer of values. I won't go into too much detail here. I'll just talk about some of the minor problems I encountered in development.

Parent and child components of two files

vue official website and novice bird tutorials are not very clear, here I will make it clear. Don't talk too much nonsense, just go to the code.

Parent component:

<template>
  <div>
    //Try:
    <my-dialog v-bind="dialog_data"></my-dialog>
  </div>
</template>

<script>
// Parent component refers to child component and avoids switch keyword
import myDialog from '../publicCompoments/winDialog'
export default {
  components: { myDialog },
  data() {
    return {
      dialog_data: {
        isNoWin: true, // Whether or not the winner did not win the prize by default, the value is: true
        iconPath: require('../../assets/img/undraw.png'),   // Note that require is used to transmit pictures here.
        title: 'Page Test Title!',  // Page title
        text: 'Page test text!',    // text
      }
    }
  }
}
</script>

<style scoped>

</style>

Sub-components: Here we should pay attention to the filename of sub-components to avoid the switch keyword, and the reference of parent components to avoid the switch keyword, which is the common sense of development, but this error is not easy to check.
Here I also explain how to pass values and paths to images in parent-child components. If you still don't understand it well, you can see the novice tutorial or the official API.

<template>
  <div>
    <div v-if="isNoWin">
      <div>
        <!-- Passing pictures between parent and child components,Subcomponents img Label src To use :scr="imgPath";
        Values in parent components need to be used require()This function passes values -->
        <img :src="iconPath">
      </div>
      <div>
        <span>{{ title }}</span>
      </div>
      <div>
        {{ text }}
      </div>
    </div>
    <div v-if="isNoWin != true">

    </div>
    <div v-if="isNoWin != true">
      //Please fill in the information.:{{ text }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'winDialog',	// This name is mandatory and easy to refer to
  props: {
    isNoWin: {  // A control label that sets default values
      type: Boolean,
      default: false	//Setting default values
    },
    iconPath: String,   // Page reality quota Icon
    title: String,  // Page title
    text: String,    // text
  }
}
</script>
<style scoped>
</style>

That's all I remember for the time being. I'll update it later.