3. Understanding of one-way data flow

The case of passing multiple 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({ data(){ return{ message: 'Hello World! ', message1: 'Hello World111! ', message2: 'Hello World222! ', message3: 'Hello World333! ', } }, template: `<div>
          <test :message="message" :message1="message1" :message2="message2" :message3="message3" />
        </div>`}); app.component('test',{ props: ['message', 'message1', 'message2', 'message3'], template: `<div>
          {{ message }} -- {{ message1 }} -- {{ message2 }} -- {{ message3 }}
        </div>
    `
  })

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

</html>
Copy the code

The results

Simplify the writing of multiple 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({ data(){ return{ parameter: { message: 'Hello World! ', message1: 'Hello World111! ', message2: 'Hello World222! ', message3: 'Hello World333! ', } } }, template: `<div>
          <test v-bind="parameter" />
        </div>`}); app.component('test',{ props: ['message', 'message1', 'message2', 'message3'], template: `<div>
          {{ message }} -- {{ message1 }} -- {{ message2 }} -- {{ message3 }}
        </div>
    `
  })

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

</html>
Copy the code

The results

About Attribute Names

If the attribute name is multiple words, you are advised to use – split. The HTML attribute name does not support uppercase and will be automatically converted to lowercase.

<! 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{
        message: 'Hello World! '}},// Use -write here
    template: ` 
       
 
         
       
 `
  });

  // However, we must use the hump name to receive, otherwise we cannot receive!
  app.component('test', {props: ['myMessage'].template: ` 
       

         {{ myMessage }} 
       
 `
  })

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

</html>
Copy the code

The results

Unidirectional data flow

The child component has no right to change the data passed by the parent

<! 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{
        count: 1}},template: ` 
       
 
         
       
 `
  });

  
  app.component('test', {props: ['count'].template: ` 
       

        {{ count }}
       
 `
  })

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

</html>
Copy the code

The results

Resolve an issue where the data passed by the parent component cannot be changed

The child component cannot change the data passed by the parent component. The child component can define a custom property, assign the data from the parent component to the custom property, and then change the custom property

<! 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{
        count: 1}},template: ` 
       
 
         
       
 `
  });

  
  app.component('test', {props: ['count'].data(){
      return{
        myCount: this.count
      }
    },
    template: ` 
       

        {{ myCount }}
       
 `
  })

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

</html>
Copy the code

The results

Why can’t a self component change data from a parent component

Because if a child component can change the parent’s data, the data used in other components that use that data will also change, and each component affects the other!