2021-09-03 vue笔记-组件化开发(一) 组件语法和示例,全局和局部组件,父子组件

原创已于 2022-10-16 11:03:59 修改 · 130 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #组件 #prop

于 2021-09-03 21:29:26 首次发布

vue学习笔记专栏收录该内容

36 篇文章

订阅专栏

本文详细介绍了Vue.js中的组件系统，包括全局和局部组件的创建与使用，事件绑定的实现，以及父子组件间的交互。文章通过实例展示了如何注册和调用组件，强调了局部组件的作用域限制，以及组件模板必须包含一个根节点的要求。此外，还讨论了组件与Vue实例的区别，帮助读者深入理解Vue组件化开发的核心概念。

文章目录

1.组件语法和全局&局部组件

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

1.1.语法

HTML:调用组件

<组件名></组件名>

JS:注册组件
全局组件

vue.component(组件名,{
	template:`html代码`
};

局部组件:

new Vue({
	...
	components:{
		组件名:{
			template:`html代码`
		}
	}
});

1.2.例子:全局组件和局部组件

<body>
    <div id="app">
        <zujian></zujian>
    </div>
</body>
<script>
    // 全局组件
    // Vue.component('zujian', {
    //     template: '<h1>我是全局组件</h1>'
    // });
    new Vue({
        el: "#app",
        //  局部组件
        components: {
            "zujian": {
                template: '<h1>我是局部组件</h1>'
            }
        }
    });
</script>

1.3.局部组件

局部组件需要在使用它的父组件中显式导入，并且只能在该父组件中使用。
优点:组件之间的依赖关系更加明确

2.组件绑定事件的方法直接在写在组件注册中

Vue.component("zujian", {
    template: `<button @click="fn()">点击</button>`,
    //直接在写在 template后面
    methods: {
        fn: function() {
            console.log(2222);
        }
    }
});
var app = new Vue({
    el: "#app",
    // 无法访问:不能把fn写在这里
    // methods: {
    //     fn: function() {
    //         console.log(2222);
    //     }
    // }
});

一个组件可同时包含HTML+CSS+JS

3.父子组件

3.1.根组件root(不重要)

根组件是系统自带的,默认是所有全局组件的父组件
在用户编写

<div id="app">
</div>
<script>
    var app = new Vue({
        el: "#app"
    });
</script>

时自动调用

3.2.全局定义的子组件和局部定义的子组件

代码

<div id="app">
    <zujian></zujian>
    <siblings></siblings>
</div>
<script>
    // 注册全局组件zujian
    Vue.component('zujian', {
        template: `
        <div style="background:blue">
          我是zujian
          <button @click="fn()">点击</button>
          <!-- 调用子组件child -->
          <child></child>
          <!-- 调用子组件zjChild -->
          <zjChild></zjChild>
        </div>`,
        methods: {
            fn: function() {
                console.log("hello zujian");
            }
        },
        // 在zujian中直接注册zujian的局部子组件zjChild
        components: {
            zjChild: {
                template: `<p>我是zjChild</p>`
            }
        }
    });
    // 注册zujian的兄弟全局组件siblings
    Vue.component('siblings', {
        template: `
      <div style="background:red">
          我是siblings
            <!-- 调用子组件child -->
          <child></child>
      </div>`
    });
    // 注册一个全局组件child,并在其他组件中调用,让其成为公共子组件
    Vue.component('child', {
        template: `
      <div style="color:white">
        我是child
      </div>`
    });
    var app = new Vue({
        el: "#app"
    });
</script>

结果:siblings组件无法调用zjChild子组件

在这里插入图片描述

4.注册组件时,template中的HTML结构必须包含一个根节点

即,template:{HTML结构}中,不能出现多个div并列的情况

Vue.component('zujian', {
    template: `
    <div>hello</div>
    <div>world</div>`
});

否则报错

5.组件编写方式与Vue实例的区别

注册组件时必须包含一个根节点
父子组件的data不共享
组件注册可以有data,computed,methods,但data必须是一个函数

data(){
	return;
 }