2. Value transfer and value transfer verification between components

Parent component passes value to child component

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    template: `
        <div>
          <test message="Hello World!" />
        </div>`}); app.component('test',{ props: ['message'], template: `<div>{{message}}</div>
    `
  })

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

The parent component passes dynamic parameters to the child component

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data(){
      return{
        num: 123
      }
    },
    template: `
        <div>
          <test message="123" />
          <test :message="num" />
        </div>`}); app.component('test',{ props: ['message'], template: `<div>{{ typeof message }}</div>
    `
  })

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

The child component verifies the parent component’s parameters

String, Array, Boolean, Object, Function, Symbol

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data(){
      return{
        num: 123
      }
    },
    template: `
        <div>
          <test message="123" />
          <test :message="num" />
        </div>`}); // String, Array, Boolean, Object, Function, Symbol app.component.props ('test',{props: {message: String}, template: '<div>{{ typeof message }}</div>
    `
  })

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

A parent component passes functions to its children

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>Const app = vue.createApp ({methods:{add(){console.log(" Function executed successfully! ) } }, template: `<div>
          <test :message="add" />
        </div>`}); App.component.props ('test',{props: {message: Function}, template: '<div>
          {{ typeof message }}
          <button @click="message">Am I</button>
        </div>
    `
  })

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

Set mandatory transmission parameters

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    template: `
        <div>
          <test message="hello" />
          <! -- No input -->
          <test />
        </div>`}); App.component.props ('test',{props: {message: {type: String, // Requires a String (type) required: }}, template: '<div>
          {{ typeof message }}
          {{ message }}
        </div>
    `
  })

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

Set default values for the parameters

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    template: `
        <div>
          <test message="hello" />
          <! -- No input -->
          <test />
        </div>`}); App.component.props ('test',{props: {message: {type: String, // Required: true, // Required: default: 'Big brother Liu Bei' // default value, can also be a function}}, template: '<div>
          {{ typeof message }}
          {{ message }}
        </div>
    `
  })

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

The value must be less than 1000

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data(){
      return{
        number: 2000}},template: ` 
       
 
         
       
 `
  });

  // Check
  app.component('test', {props: {
      message: {
        type: Number.// Request a number
        required: true.// The request must be passed
        default: 100./ / the default value
        validator: function(value){
          return value < 1000;
        } / / limit value}},template: ` 
       

         {{ typeof message }} {{ message }} 
       
 `
  })

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results