保存父组件传递的数据
Document通过props传递数据 父组件向子组件传递数据 目的 子组件改变父组件数据
<script>
Vue.component('my-comp',{
// props 接受数据
props:['msg'],
//data中保存后 子组件显示数据
template:'<div>子组件+{{count}}</div>',
data:function(){
return{
//存储数据
count:this.msg
}
}
})
var app = new Vue({
el: '#demo',
//局部注册
data: {
}
})
</script>
props作为被要转变的原始值传入 使用计算属性methosds
注册组件
将组件的数据传递进来 并在props中接收
将传递进来的数据进行计算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="demo">
<!-- 通过v-model 绑定input输入的数据 width要在 vue中的data中定义-->
<input type="text" v-model="width">
<!-- v-on 动态绑定 父组件传递的数据 -->
<my-assembly :width="width"> </my-assembly>
</div>
<script>
//注册组件
Vue.component('my-assembly',{
//接受组件传递的数据
props:['width'],
//子组件demo
template:'<div :style="wstyle">{{width}}</div>',
//保存子组件传递的数据
data:function(){
return{
widths:this.width
}
},
//计算父组件传递进来的数据并使用
computed:{
wstyle:function(){
return{
width:this.width+'px',
background:'red',
height:'15px'
}
}
}
})
var app = new Vue({
el: '#demo',
data: {
//这里必须定义width 不然出错
width:''
}
})
</script>
</body>
</html>
