Vue props 单向数据流的实现

来源：动视网责编：小采时间：2020-11-27 22:05:27

Vue props 单向数据流的实现

Vue props 单向数据流的实现:1、props通信注意：DOM模板的驼峰命名props要转为短横分割命名。 <!DOCTYPE html> <html lang=zh> <head> <meta charset=UTF-8 /> <title>Vue</title> </hea

推荐度：

点击下载本文 文档为doc格式

导读Vue props 单向数据流的实现:1、props通信注意：DOM模板的驼峰命名props要转为短横分割命名。 <!DOCTYPE html> <html lang=zh> <head> <meta charset=UTF-8 /> <title>Vue</title> </hea

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>

Vue props 单向数据流的实现

推荐度：

点击下载本文 文档为doc格式

标签：数据 VUE 实现

热门焦点

Vue props 单向数据流的实现

Vue props 单向数据流的实现

Vue props 单向数据流的实现

最新推荐

猜你喜欢

热门推荐