Vue props 单向数据流的实现
程序员文章站
2022-06-20 08:11:18
1、props通信
注意：dom模板的驼峰命名props要转为短横分割命名。
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
推荐阅读