Vue.js入门学习--父子组件的说明和简单通信（十）

最新推荐文章于 2023-12-01 20:32:51 发布

appleyk

最新推荐文章于 2023-12-01 20:32:51 发布

阅读量8.4k

点赞数 2

分类专栏： Vue2.X前端学习笔记文章标签： vue.js 什么是父子组件 vue.js 父子组件 vue 组件 vue.js 通过demo说明父子关系之间的向上通信

本文链接：https://blog.csdn.net/Appleyk/article/details/79237211

版权

Vue2.X前端学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

学习组件的时候，我们往往纠结于什么是子组件，什么是父组件，我的理解是

针对全局组件注册来说

注册的组件是子组件，包含子组件使用的环境（元素）叫做父组件，这就是为什么，全局组件注册要在根Vue实例实例化之前注册的原因所在吧，这个根Vue实例其实就是我们的父组件的数据模板，又称父组件的数据渲染部分，我们来看下面一段demo

<html>

<head>
    <title>父子组件</title>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <!-- #app是被挂起的元素，也就是最外层的div，其就是父组件，数据模板为实例app的数据渲染 -->
    <div id="app">
        <span>{{total}}</span>
        <br>
        <br>
        <!-- 子组件my-button的点击事件再次触发了自身的事件increment，从而最后改变了父组件中的total -->
        <my-button @increment='incrementTotal'></my-button>
        <my-button @increment='incrementTotal'></my-button>
    </div>

</body>
<script>
    Vue.component('my-button', {
        template: "<button @click='incrementCounter'>{{counter}}</button>",
        data: function () {
            return {
                //每个子组件的counter计算器都是从0开始的,各自拥有counter，互补干扰
                counter: 0
            }
        },
        methods: {
            incrementCounter: function () {
                this.counter++;
                //子组件调用的同时，再触发自身监听的increament事件
                //子组件通过 events 发送消息给父组件，父组件则通过 props 向下传递数据给子组件
                //因此，父子组件之间的关系可以概述为：props 向下，events 向上
                this.$emit('increment') //$emit触发子组件的一个事件
            }
        }
    })
    var app = new Vue({
        el: '#app',
        data: {
            total: 0
        },
        methods: {
            incrementTotal: function () {
                this.total++;
            }
        }
    })
</script>

</html>

我们的子组件my-button都有自己的数据模板，那就更不用说我们的父组件div了，没有的话，上一篇我们已经说过了，是毫无意义的，我们看一下，所谓的根Vue实例，其实就是父组件div的数据模板（数据渲染）

以上demo的意思我这里按照自己的理解说明一下

子组件刻的是button按钮的模子，且绑定了click事件，用来点击一次，就将当前子组件的counter计数器加1，counter的初始值，我们在每个子组件的数据data函数中设置过了，都是从0开始，而且，我们子组件的事件click执行的JavaScript代码是一个方法名，直接定位到自身组件的methods方法中的incrementCounter函数，函数中，我们除了执行计算器+1外，我们还触发了子组件自身的另一个事件increment，这个event传递到了父组件中，直接作用在父组件的数据模板上，使得，父组件的数据渲染部分，将total变量+1，也就是，子组件自身发生变化，是独立的，子组件1自身counter+1不会影响子组件2的counter,但是，两个子组件的counter+1却会影响父组件的数据渲染，通过自身的counter+1触发父组件的total+1，因此我们最终在浏览器中会看到如下效果：

appleyk

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js入门学习--父子组件的说明和简单通信（十）

学习组件的时候，我们往往纠结于什么是子组件，什么是父组件，我的理解是针对全局组件注册来说注册的组件是子组件，包含子组件使用的环境（元素）叫做父组件，这就是为什么，全局组件注册要在根Vue实例实例化之前注册的原因所在吧，这个根Vue实例其实就是我们的父组件的数据模板，又称父组件的数据渲染部分，我们来看下面一段demo 父子组件
复制链接

扫一扫