微客导航 » 文章资讯 » Vue props 单向数据流的实现

Vue props 单向数据流的实现

2023-09-06 03:50:05 210

1、props通信

注意：DOM模板的驼峰命名props要转为短横分割命名。

Vue

Vue.component('my-component',{ template:'

{{warningText}}：{{message}}

', props:['message','warningText'] }) newVue({ el:"#app" })

传递动态数据（v-bind）：

Vue

Vue.component('my-component',{ template:'

', props:['message'] }) newVue({ el:"#app", data:{ parentMessage:'' }//前端全栈开发交流群： })//866109638 //帮助1-3年工作人员 //突破技术瓶颈，提升思维能力

2、单向数据流

（1）子组件保存父组件传递过来的值，在子组件自己的作用域下修改和使用。

Vue

Vue.component('my-component',{ template:'

', props:['initCount'], data:function(){ returnthis.initCount } }) newVue({ el:"#app" })

（2）使用计算属性






Vue
//前端全栈交流学习圈：
//866109386，帮助1-3年前端人员
//突破技术瓶颈，提升思维能力

Vue.component('my-component',{ template:'组件内容

', props:['width'], computed:{ style:function(){ return{ width:this.width+'px' } } } }) newVue({ el:"#app" })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。