Vue's example code to implement component data interaction using Props

props can be an array or object that specifies the attribute name accepted by a child component. When using child components in the parent component, data is passed to the child component through attributes, and the attribute name is the attribute name of the props declared in the child component. A child component can access the data passed by the parent component through the props attribute in its template. The role of props is to pass data to subcomponents, allowing the delivery of any number of props and any type of props. In Vue 3 and TypeScript, it is important to get a deeper understanding of the Props of a component, as the props attribute can be used in the component's options to define the type and validation rules of the Props.

Use as follows:

1. Pass data using the parent component of the child component

<RefreshBtn @onFreshEvent="getData" :newsRefresh="newsRefresh"/>

2. Subcomponent data application, use props to determine the type and default value of the received data, and data verification can also be performed in props.

<template>
    <button @click="refreshHandle">refresh</button>
    <p>Parent page data：{{newsRefresh}}</p>
</template>
 
<script>
export default {
    name: "RefreshBtn",
    props: {
        newsRefresh: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            target: 1
        }
    },
    methods: {
        refreshHandle() {
            this.$emit("onFreshEvent",);
             += 1;
        }
    }
}
</script>

Complete verification writing of props:

props: {
  Verified attribute name: {
    type: type,  // Number String Boolean ...
    required: true, // Is it required    default: default value, // default value    validator (value) {
      // Custom verification logic      return Whether it passes the verification
    }
  }
},

<script>
export default {
  // Complete writing method (type, default value, non-empty, custom verification)  props: {
    w: {
      type: Number,
      //required: true,
      default: 0,
      validator(val) {
        // (val)
        if (val >= 100 || val <= 0) {
          ('The incoming range must be between 0-100')
          return false
        } else {
          return true
        }
      },
    },
  },
}
</script>

This is the article about Vue’s sample code to implement component data interaction using Props. For more related Vue Props data interaction content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!