vue全局组件和局部组件(一)

全局组件


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    <script src="js/vue.js">script>
head>
<body>
        <div id="example">
            <aaa>aaa>
        div>
<script>
    window.onload=function(){
        //注册全局组件
       var Aaa= Vue.extend({
            template: '
A custom component!
'
}); //template里面的内容添加到新注册的全局组件 Vue.component('aaa',Aaa); new Vue({ //根组件 el: '#example' }) }
script> body> html> 注:当script放于div下面时,window.onload可省略,放于最上面时,不可省,否则页面内容将加载不出来。 ---------- ## 组件里面放数据 ## 注意:data必须是函数的形式,函数必须返回一个对象(json)。 可替换代码如下: var Aaa= Vue.extend({ data(){ return:{ msg:'返回一个对象' } }, template: '<div>{{msg}}div>' }); Vue.component('aaa',Aaa); new Vue({ el: '#example', data:{ } }) ---------- ## 点击更换组件里面的msg ## var Aaa= Vue.extend({ data(){ return:{ msg:'返回一个对象' } }, methods:{ change(){ this.msg="更换的数据" } } template: '<div @click="change">{{msg}}div>' });//点击更换数据 Vue.component('aaa',Aaa); new Vue({ el: '#example', data:{ } })

局部组件

可放于其他组件内部


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    <script src="js/vue.js">script>
head>
<body>
        <div id="example">
            <aaa>aaa>
        div>
<script>
    window.onload=function(){
        //注册全局组件
       var Aaa= Vue.extend({
            template: '
A custom component!
'
}); //此部分是一个根组件,当components添加于根组件下面时,标志此组件为局部组件 new Vue({ el: '#example', data:{ }, components:{ aaa:Aaa //此处需注意,当局部组件名为A—B时,需用引号引起来如:'a-aa':Aaa } }) }
script> body> html> 局部组件里面放数据与全局组件相同

注:此方式不常使用

你可能感兴趣的:(vue全局组件和局部组件(一))