<h4>注册全局组件</h4>
<div id="app-1">
<my-component></my-component>
</div>
<script>
//注册 全局 组件
Vue.component('my-component',{
//选项
template:'<div>这是全局注册组件</div>'
})
//创建根实例
var app1=new Vue({
el:'#app-1',
})
</script>
<h4>注冊局部组件</h4>
<div id="app-2">
<div id="app-2">
<my-component></my-component>
</div>
</div>
<script>
var Child=Vue.extend({
template:'<div>A custom component!</div>'
})
var app3=new Vue({
el:'#app-2',
components:{
'my-component':Child
}
})
</script>
<h4>data必须是函数</h4>
<div id="app-3">
<simple-counter></simple-counter>
<simple-counter></simple-counter>
<simple-counter></simple-counter>
<simple-counter></simple-counter>
</div>
<script>
var data = { counter: 0 }
Vue.component('simple-counter',{
template:'<button v-on:click="counter+=1">{{ counter }}</button>',
data:function(){
return {
counter:0
}
}
})
var app4=new Vue({
el:'#app-3'
})
</script>
<h4>使用Prop传递数据</h4>
<div id="app-4">
<child message="hello,vue.js"></child>
</div>
<script>
Vue.component('child', {
// 声明 props
props: ['message'],
// 就像 data 一样,prop 可以用在模板内
// 同样也可以在 vm 实例中像 “this.message” 这样使用
template: '<span>{{ message }}</span>'
})
var app5=new Vue({
el:'#app-4'
})
</script>
HTML特性不区分大小写,当使用非字符串模版时,prop的名字形式会从camelCase转为kebab-case(短横线隔开)
<h4>camelCase-vs-kebab-case</h4>
<div id="app-5">
<child my-message="hello!"></child>
</div>
<script>
Vue.component('child',{
props:['myMessage'],
template:'<span>{{myMessage}}</span>'
})
var app6=new Vue({
el:'#app-5'
})
</script>
Vue.js之组件注册
最新推荐文章于 2024-06-29 16:24:25 发布