Note: Basic syntax of Vue2. X

Code demonstration: Vue root component as parent component to demonstrate the parent component passing data to the child component

Preparation:

  1. Create parent app. vue and Child child.vue
  2. Introduces child components within parent components
  3. Registers child components within the parent component
  4. Use child component labels in parent component templates
< div id = "app" > < h1 > I'm from the parent component data: {{uname}} < / h1 > < h1 > I'm from the parent component computation attribute: {{sum}} < / h1 > <! Import Child from "./components/ child.vue "; import Child from "./components/ child.vue "; Export default {name: "App", data() {return {uname: "zhang Sam ", num1:10, num2:50,}; }, computed: { sum() { return this.num1 + this.num2; },}, components: {// Register Child},}; </script>Copy the code

Use steps:

Step 1: Define custom properties in the Child component custom tag Child in the parent component template

  1. If the custom property is bound with V-bind, the quoted contents of the property value are parsed into variables
    • This variable comes from computed data in the parent component instance’s data or computed property
  2. If the custom property is not v-bind, the quoted contents of the property value will be parsed into a normal string
< div id = "app" > < h1 > I'm from the parent component data: {{uname}} < / h1 > < h1 > I'm from the parent component computation attribute: {{sum}} < / h1 > <! --> <Child V-bind :uname_child=" XXX "></Child> </div> </template>Copy the code

Step 2: Bind the data that needs to be passed to the custom property

  • Spaces can be separated when passing multiple data
< div id = "app" > < h1 > I'm from the parent component data: {{uname}} < / h1 > < h1 > I'm from the parent component computation attribute: {{sum}} < / h1 > <! -- Assign uname from parent component data to uname_child --> <! -- Assign sum in computed property to sum_child --> <! Msg_child --> <Child V-bind :uname_child="uname" V-bind :sum_child="sum" MSg_child =" I am not v-bind "></Child> </div> </template>Copy the code

Step 3: The child component instance receives the passed data

  1. In the props property of the child component instance, it receives data from the parent component as an array
  2. Each member in the array is the name of the custom property we defined earlier in # Step 1#, one-to-one
  3. Each member is enclosed in quotes, and multiple members are separated by commas
export default { name: "Child", props: ["uname_child", "sum_child", "msg_child"], data() { return {}; }}; </script>Copy the code

Step 4: Use the passed data in the child component template

<div> <h2> I am the child -----</h2> <h3> I am the parent data passed :{{uname_child}}</h3> <h3> I am the parent computed property computed :{{sum_child}}</h3> <h3> I am a normal string passed by the parent component :{{msg_child}}</h3> <! - other ways to use: - > < h3 v - text = "uname_child" > < / h3 > < h3 v - HTML = "uname_child" > < / h3 > < input type = "text" v-bind:value="uname_child" /> </div> </template>Copy the code

Browser rendering