Vue组件以及组件之间的通信

一、组件的注册

1、全局组件注册

1. 注册基本语法Vue.component

    Vue.component("my_header", {
        template: `<div><h1>{{title}}</h1></div>`,
        data() {
            return {
                title: "这是头部"
            }
        }
    });

View Code

2. 第一个参数"my_header"：组件名称
3. 第二个参数{}：配置信息
4. 配置信息里面必须要有template，它的值是这个组件的html代码
5. 还可以有data、methods等参数，不同的是data不是对象了，而是函数，return返回的值，在template中可以获取并使用
函数详写是 data:function(){}; ES6中可以直接简写 data(){return }，其他函数一样可以简写省略 :function
6. Vue里面有的参数，组件里面多数也有，但是有一些参数是组件不能有的，比如el参数，所有组件都是Vue可复用的实例
7. 全局组件，所有app都可以使用

8. demo

<body>
<div id="app">
    <my_header></my_header>
</div>

<hr>

<div id="app2">
    <my_header></my_header>
</div>

<script>
    Vue.component("my_header", {
        template: `<div><h1>{{title}}</h1></div>`,
        data() {
            return {
                title: "这是头部"
            }
        }
    });
    const app = new Vue({
        el: "#app",
        
    });
    
    const app2 = new Vue({
        el: "#app2"
    })
</script>
</body>

View Code

一、组件的注册

1、 全局组件注册

1、全局组件注册