console
Vue.component('testbtn', {
data: function() {
return {
count: 0
}
},
props:{
name:{
type:String,
default:100
},
colorTheme:String,
placeholder:{
type:String,
default:'请输入您的姓名'
}
},
template: "<div><button :class='colorTheme' @click='test'>点击了{{count}}次</button><p>子组件内显示的内容:{{name}}</p><input :placeholder='placeholder'></div>",
methods:{
test:function(){
this.count++;
this.$emit('update:name','新丝绸之路'+this.count)
}
}
})
var x = new Vue({
el: '#app',
data: {
title:'一带一路'
},
methods:{
dothis:function(a){
console.log(a.flag)
}
}
})
<div id="app">
{{title}}
<testbtn :name.sync='title' color-theme='green' @on-click='dothis' placeholder='请输入你的年龄'></testbtn>
</div>
#app{color:#fff}
.red{color:red}
.blue{color:blue}
.green{color:green}