SoFunction
Updated on 2025-04-04

Implementation of Vue props One-way data flow

1. Props communication

Note: The camel naming props of the DOM template should be converted to short horizontal segmentation naming.

<!DOCTYPE html>
<html lang="zh">

  <head>
    <meta charset="UTF-8" />
    <title>Vue</title>
  </head>

  <body>
    <div >
      <my-component message='Data from parent component' warning-text="Prompt message"></my-component>

    </div>
    <script src="/vue/2.5.9/"></script>
    <script type="text/javascript">
      ('my-component', {
        template: '<div>{{warningText}}：{{message}}</div>',
        props: ['message', 'warningText']
      })
      new Vue({
        el: "#app"
      })
    </script>
  </body>

</html>

Pass dynamic data (v-bind):

<!DOCTYPE html>
<html lang="zh">

  <head>
    <meta charset="UTF-8" />
    <title>Vue</title>
  </head>

  <body>
    <div >
      <input type="text" v-model="parentMessage" />
      <my-component :message='parentMessage'></my-component>

    </div>
    <script src="/vue/2.5.9/"></script>
    <script type="text/javascript">
      ('my-component', {
        template: '<div>{{message}}</div>',
        props: ['message']
      })
      new Vue({
        el: "#app",
        data: {
          parentMessage: ''
        }//Front-end full stack development exchange group:      })//866109638
    </script>//Help 1-3 years of staff  </body>//Break through technical bottlenecks and improve thinking ability
</html>

2. One-way data flow

(1) The child component saves the values ​​passed by the parent component and modify and use them under the child component's own scope.

<!DOCTYPE html>
<html lang="zh">

  <head>
    <meta charset="UTF-8" />
    <title>Vue</title>
  </head>

  <body>
    <div >

      <my-component :init-count='1'></my-component>

    </div>
    <script src="/vue/2.5.9/"></script>
    <script type="text/javascript">
      ('my-component', {
        template: '<div>{{initCount}}</div>',
        props: ['initCount'],
        data: function() {
          return 
        }
      })
      new Vue({
        el: "#app"
      })
    </script>
  </body>

</html>

(2) Use calculation properties

&lt;!DOCTYPE html&gt;
&lt;html lang="zh"&gt;

  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;title&gt;Vue&lt;/title&gt;
  &lt;/head&gt;//Front-end full-stack communication and learning circle://866109386, help front-end personnel for 1-3 years  &lt;body&gt;//Break through technical bottlenecks and improve thinking ability    &lt;div &gt;

      &lt;my-component :width='100'&gt;&lt;/my-component&gt;

    &lt;/div&gt;
    &lt;script src="/vue/2.5.9/"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
      ('my-component', {
        template: '&lt;div :style="style"&gt;Component content&lt;/div&gt;',
        props: ['width'],
        computed: {
          style: function() {
            return {
              width:  + 'px'
            }
          }
        }
      })
      new Vue({
        el: "#app"
      })
    &lt;/script&gt;
  &lt;/body&gt;

&lt;/html&gt;

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.