Vue props 单向数据流的实现

2024-05-06 15:28:12

字体：大中小

来源：转载

供稿：网友

1、props通信

注意：DOM模板的驼峰命名props要转为短横分割命名。

<!DOCTYPE html><html lang="zh">  <head>    <meta charset="UTF-8" />    <title>Vue</title>  </head>  <body>    <div id="app">      <my-component message='来自父组件的数据' warning-text="提示信息"></my-component>    </div>    <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>    <script type="text/javascript">      Vue.component('my-component', {        template: '<div>{{warningText}}：{{message}}</div>',        props: ['message', 'warningText']      })      new Vue({        el: "#app"      })    </script>  </body></html>

传递动态数据（v-bind）：

<!DOCTYPE html><html lang="zh">  <head>    <meta charset="UTF-8" />    <title>Vue</title>  </head>  <body>    <div id="app">      <input type="text" v-model="parentMessage" />      <my-component :message='parentMessage'></my-component>    </div>    <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>    <script type="text/javascript">      Vue.component('my-component', {        template: '<div>{{message}}</div>',        props: ['message']      })      new Vue({        el: "#app",        data: {          parentMessage: ''        }//前端全栈开发交流群：      })//866109638    </script>//帮助1-3年工作人员  </body>//突破技术瓶颈，提升思维能力</html>

2、单向数据流

（1）子组件保存父组件传递过来的值，在子组件自己的作用域下修改和使用。

<!DOCTYPE html><html lang="zh">  <head>    <meta charset="UTF-8" />    <title>Vue</title>  </head>  <body>    <div id="app">      <my-component :init-count='1'></my-component>    </div>    <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>    <script type="text/javascript">      Vue.component('my-component', {        template: '<div>{{initCount}}</div>',        props: ['initCount'],        data: function() {          return this.initCount        }      })      new Vue({        el: "#app"      })    </script>  </body></html>

（2）使用计算属性

<!DOCTYPE html><html lang="zh">  <head>    <meta charset="UTF-8" />    <title>Vue</title>  </head>//前端全栈交流学习圈：//866109386，帮助1-3年前端人员  <body>//突破技术瓶颈，提升思维能力    <div id="app">      <my-component :width='100'></my-component>    </div>    <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>    <script type="text/javascript">      Vue.component('my-component', {        template: '<div :style="style">组件内容</div>',        props: ['width'],        computed: {          style: function() {            return {              width: this.width + 'px'            }          }        }      })      new Vue({        el: "#app"      })    </script>  </body></html>

上一篇：利用hasOwnProperty给数组去重的面试题分享

下一篇：对 Vue-Router 进行单元测试的方法

学习交流

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...

热门图片

猜你喜欢的新闻

猜你喜欢的关注