1、props通信
注意：DOM模板的驼峰命名props要转为短横分割命名。
<!DOCTYPE html>
<html lang=\"zh\">
<head>
< charset=\"UTF-8\" />
< >Vue</ >
</head>
<body>
<div id=\"app\">
<my-component message=\'来自父组件的数据\' warning-text=\"提示信息\"></my-component>
</div>
< src=\"https://cdn.bootcss.com/vue/2.5.9/vue.min.js\"></ >
< type=\"text/ \">
Vue.component(\'my-component\', {
template: \'<div>{{warningText}}：{{message}}</div>\',
props: [\'message\', \'warningText\']
})
new Vue({
el: \"#app\"
})
</ >
</body>
</html>
传递动态数据（v-bind）：
<!DOCTYPE html>
<html lang=\"zh\">
<head>
< charset=\"UTF-8\" />
< >Vue</ >
</head>
<body>
<div id=\"app\">
<input type=\"text\" v-model=\"parentMessage\" />
<my-component :message=\'parentMessage\'></my-component>
</div>
< src=\"https://cdn.bootcss.com/vue/2.5.9/vue.min.js\"></ >
< type=\"text/ \">
Vue.component(\'my-component\', {
template: \'<div>{{message}}</div>\',
props: [\'message\']
})
new Vue({
el: \"#app\",
data: {
parentMessage: \'\'
}//前端全栈开发交流群：
})//866109638
</ >//帮助1-3年工作人员
</body>//突破技术瓶颈，提升思维能力
</html>
2、单向数据流
（1）子组件保存父组件传递过来的值，在子组件自己的作用域下修改和使用。
<!DOCTYPE html>
<html lang=\"zh\">
<head>
< charset=\"UTF-8\" />
< >Vue</ >
</head>
<body>
<div id=\"app\">
<my-component :init-count=\'1\'></my-component>
</div>
< src=\"https://cdn.bootcss.com/vue/2.5.9/vue.min.js\"></ >
< type=\"text/ \">
Vue.component(\'my-component\', {
template: \'<div>{{initCount}}</div>\',
props: [\'initCount\'],
data: function() {
return this.initCount
}
})
new Vue({
el: \"#app\"
})
</ >
</body>
</html>
（2）使用计算属性
<!DOCTYPE html>
<html lang=\"zh\">
<head>
< charset=\"UTF-8\" />
< >Vue</ >
</head>//前端全栈交流学习圈：
//866109386，帮助1-3年前端人员
<body>//突破技术瓶颈，提升思维能力
<div id=\"app\">
<my-component :width=\'100\'></my-component>
</div>
< src=\"https://cdn.bootcss.com/vue/2.5.9/vue.min.js\"></ >
< type=\"text/ \">
Vue.component(\'my-component\', {
template: \'<div :style=\"style\">组件内容</div>\',
props: [\'width\'],
computed: {
style: function() {
return {
width: this.width + \'px\'
}
}
}
})
new Vue({
el: \"#app\"
})
</ >
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
继续阅读与本文标签相同的文章
-
一眼望去 都是中国好CP的形状
2026-05-19栏目： 教程
-
前端开发深水区讨论
2026-05-19栏目： 教程
-
精读《使用 css 变量生成颜色主题》
2026-05-19栏目： 教程
-
震撼！全球首台“智慧旅游黑科技车”现身井陉……
2026-05-19栏目： 教程
-
科技产品没有时尚力？搜狗AI录音笔，要科技更要时尚
2026-05-19栏目： 教程