Vue props 单向数据流的实现
(编辑：jimmy 日期: 2024/11/17 浏览：3 次 )
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="/UploadFiles/2021-04-02/vue.min.js">
传递动态数据（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="/UploadFiles/2021-04-02/vue.min.js">
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="/UploadFiles/2021-04-02/vue.min.js">
（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="/UploadFiles/2021-04-02/vue.min.js">
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇：微信小程序实现选项卡效果
下一篇：给localStorage设置一个过期时间的方法分享
在去年的5月23日，借助Intel Bridge Technology以及Intel Celadon两项技术的驱动，Intel为PC用户带来了Android On Windows（AOW）平台，并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版，将Windows与安卓两大生态进行了融合，PC的使用体验随即被带入到了一个全新的阶段。