vue和html传值,vue组件传值.html

.ball{

width: 20px;

height: 20px;

border-radius: 20px;

background-color: red;

}

这是一个新的全局组件

var app = new Vue({

el:'#app',

data:{

msg:'1 父组件中的数据',

},

methods:{

},

components:{

//子组件中默认无法调用父组件的data上的数据和methods方法

login:{

data:function(){//子组件自身的数据 在子组件当中是可读可写的，props内的数据不是可写的，只可读

return{

title:"123",

content:"qqq",

}

},

template:"

私有组件------{{parentdata}}---{{title}}----{{content}}

",

//组件中的所有的props都是父组件传递给子组件的

props:{

'parentdata':{

type:String,

},

},//把父组件绑定的属性在子组件的props当中定义一下，才能使用父组件传递过来的数据

}

}

});

一键复制

编辑

Web IDE

原始数据

按行查看

历史