关于javascript:vue组件component

36次阅读

共计 701 个字符,预计需要花费 2 分钟才能阅读完成。

一、组件注册
1、组件名:能够应用 kebab-case 短横线分隔命名, 也能够应用 PascalCase 驼峰命名。
2、全局注册
应用 Vue.component 来创立的组件作用域是全局,在任何新创建的 Vue 根实例(new Vue)的模板中,都能够应用。

<div id="app">
    <my-component title='计数器' text='增加' @clicknow='getCount'>
        <!-- span 会被放如到组件中 <slot> 标签的地位 -->
        <span> 我是一个插入到组件开端的 span</span>
    </my-component>
</div>
<script>
Vue.component('myComponent', {
    props:[
        'title',
        'text'
    ],
    data: function(){
        return {count: 0}
    },
    methods:{add:function(){
            this.count++
            // 能够派发一个事件到组件实例,抛出一个值
            // 应用 $emit(), 第一个参数是事件名称,第二个值是传递参数
            this.$emit('clicknow',this.count)
        }
    },
    template: `<div>
        {{title}}
        <div class="btn" @click='add'>{{text}}</div>
        <span>{{count}}</span>
        <!-- 通过插槽,能够向一个组件传递内容 -->
        <slot></slot>
    </div>`
})
let vm = new Vue({
    el: '#app',
    data: {},
    methods: {getCount:function(e){alert(e)
        }
    }
})
</script>

正文完
 0