初识组件应用

实例化多个vue对象

用new创建多个vue对象并命名，可以通过变量相互访问
例子：对象2修改对象1的name变量

<!-- 第一个根元素 -->
<div id="vue-app-one">这里是：{{name}}</div> 

<!-- 第二个根元素 -->
<div id="vue-app-two">
    <p>这里是：{{name}}</p><br>
    <button @click="changeName">change-one-name</button>
    <!-- 点击后修改vue-app-one的name值-->
</div>

// 第一个vue对象
var one = new Vue({
    el:"#vue-app-one",
    data:{
        "name":"张三"
    }
})

 // 第二个vue对象
var two = new Vue({
    el:"#vue-app-two",
    data:{
        "name":"李四"
    },
    methods:{
        // 修改vue-app-one的name为'ccy333'
        changeName:function(){
            one.name = '张三哥哥'
        }
    }
})

效果：点击后修改”张三“为”张三哥哥“

全局组件

定义与使用

• 定义全局组件，需给组件一个名字，调用时，将组件名当作标签名使用；相当于自定义标签，该标签下可以包含很多子html标签；

• 这些子html标签定义在组件的template属性中，每次调用该组件，都渲染template里的标签

• template里必须只有一个根元素

• 在组件中，data是函数，将数据return回去

• 依然可以用this来调用data中定义的数据

例子：

定义组件： ① 定义一个组件，命名为my-component

② 其中包含数据：name和方法：changeName

③ 渲染出的html效果有一个p标签，包含一个按钮，点击按钮时，修改name

④ 命名规范：camelCase (驼峰命名法) 与kebab-case (短横线分隔命名)

当写成标签时，遇到有大写字母的命名，需要改成小写并用横杆链接前后两个部分，如定义组件时命名为myComponent，写成标签时应写成；

组件定义时也可以用横杆法命名；

如果定义时用myComponent，标签用是OK的，系统自动识别

// 自定义的全局组件my-component
// template中只有一个根元素p标签，里面包含一个button按钮
Vue.component('my-component',{
    template:`<p>
        我的名字是：{{name}}
        <button @click='changeName()'>btn</button>
        </p>`,
    data(){
        return {
            name:'ccy'
        }
    },
    methods:{
        changeName:function(){
            this.name = '安之'
        }
    }
})
// vue对象1
new Vue({
    el:"#vue-app-one",
})
// vue对象2
new Vue({
    el:"#vue-app-two",
})

使用组件：

① 在vue对象对应的根元素（el指定标签）下使用
② 由于定义的是全局组件，所以可以在任意的vue对象下使用
③ 组件可复用，在一个vue对象下可以使用多次，且组件间互相独立

<div id="vue-app-one">
    <my-component></my-component>
    <my-component></my-component>
</div> 

<div id="vue-app-two">
    <my-component></my-component>
</div>

局部组件

• 局部组件注册在某个vue对象中，
• 只有注册过该局部组件的vue对象才能使用这个局部组件

例子：

局部组件定义：

// template仅一个根元素：ul
var msgComponent = {
	 // 数据是自身提供的 (hobbies)
    template:`<ul><li v-for='hobby in hobbies' v-bind:key='hobby.id'>{{hobby}}</li></ul>`,
    data(){
        return {
            hobbies:['看剧','看动漫','吃好吃的']
        }
    }
}

注册局部组件：

// 仅由注册过该局部组件的vue对象才能使用，此处为div#vue-app-one
// 注意命名规范，components中对象的key将会被作为标签名，多个单词拼接的命名需使用横杆法
// 可以写成msg-component，此处直接简化了命名为msg，
new Vue({
    el:"#vue-app-one",
    components:{
        "msg": msgComponent
    }
})

html文件中使用<msg></msg>：

<div id="vue-app-one">
    <p>这里是vue-app-one</p>
    <mycomponent></mycomponent>
    <mycomponent></mycomponent>
    <p>我的爱好：</p>
    <msg></msg> <!--使用局部组件-->
</div>