(编辑：jimmy 日期: 2025/10/31 浏览：2)
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">
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。