vue父子组件间的数据传递

作者:神秘网友 发布时间:2020-10-29 00:42:22

vue父子组件间的数据传递

vue父子组件间的数据传递
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>父子组件的数据传递</title>
    <script src='./vue.js'></script>
</head>

<body>

    <div id="root">
        <counter></counter>
        <counter></counter>
    </div>

    <script>
        var counter = {
            template: '<div>0</div>'
        }
        var vm = new Vue({
            el: '#root',
            components: {
                counter: counter

            }
        })
    </script>

</body>

</html>

子组件必须在跟组件中注册 才能在标签中使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>父子组件的数据传递</title>
    <script src='./vue.js'></script>
</head>

<body>
    <!-- 不加冒号代表是字符串,加了冒号实际就是字符串表达式 -->
    <div id="root">
        <counter :count="0"></counter>
        <counter :count="1"></counter>
        <!-- 上两行代码表示父组件 -->
    </div>


    <script>
        var counter = {
            // 子组件 接收父组件传过来的数据
            props: ['count'],
            template: '<div>{{count}}</div>'
        }
        var vm = new Vue({
            el: '#root',
            components: {
                counter: counter

            }
        })
    </script>

</body>

</html>

运行流览图

vue父子组件间的数据传递

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>父子组件的数据传递</title>
    <script src='./vue.js'></script>
</head>

<body>
    <!-- 不加冒号代表是字符串,加了冒号实际就是字符串表达式 -->
    <div id="root">
        <counter :count="1"></counter>
        <counter :count="2"></counter>
        <!-- 上两行代码表示父组件 -->
    </div>


    <script>
        var counter = {
            // 子组件 接收父组件传过来的数据
            props: ['count'],
            template: '<div @click="handleClick">{{count}}</div>',

            methods: {
                handleClick: function() {
                    this.count ++

                }
            },
        }
        var vm = new Vue({
            el: '#root',
            components: {
                counter: counter

            }
        })
    </script>

</body>

</html>

但是运行中 我们会发现问题
vue父子组件间的数据传递

单向数据流的概念:父组件可以向子组件传递数据 子组件只可以进行使用 但是不得修改

原因:放置影响其他的子组件

但是我们的子组件 的确要改变父组件的值.
所以我门可以通过子组件的data 但是子组件的data必须是函数
所以代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>父子组件的数据传递</title>
    <script src='./vue.js'></script>
</head>

<body>
    <!-- 不加冒号代表是字符串,加了冒号实际就是字符串表达式 -->
    <div id="root">
        <counter :count="1"></counter>
        <counter :count="2"></counter>
        <!-- 上两行代码表示父组件 -->
    </div>


    <script>
        var counter = {
            // 子组件 接收父组件传过来的数据
            props: ['count'],
            data: function() {
                return {
                    number: this.count
                }
            },
            template: '<div @click="handleClick">{{number}}</div>',

            methods: {
                handleClick: function() {
                    this.number++

                }
            }
        }
        var vm = new Vue({
            el: '#root',
            components: {
                counter: counter

            }
        })
    </script>

</body>

</html>

运行效果图

vue父子组件间的数据传递
vm.$emit( eventName, […args] )
参数:

{string} eventName
[…args]
触发当前实例上的事件。附加参数都会传给监听器回调。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>父子组件的数据传递</title>
    <script src='./vue.js'></script>
</head>

<body>
    <!-- 不加冒号代表是字符串,加了冒号实际就是字符串表达式 -->
    <div id="root">
        <!-- //监听子组件的缩写  @   加名称 inc -->
        <counter :count="1" @inc="handleIncrease"></counter>
        <counter :count="2" @inc="handleIncrease"></counter>
        <!-- 上两行代码表示父组件 -->
        <div>{{total}} </div>
    </div>


    <script>
        var counter = {
            // 子组件 接收父组件传过来的数据
            props: ['count'],
            data: function() {
                return {
                    number: this.count
                }
            },
            template: '<div @click="handleClick">{{number}}</div>',

            methods: {
                handleClick: function() {
                    this.number = this.number + 2;
                    this.$emit('inc', 2)

                }
            }
        }
        var vm = new Vue({
            el: '#root',
            data: {
                total: 3
            },
            components: {
                counter: counter
            },
            // step接受参数
            methods: {
                handleIncrease: function(step) {
                    alert(step)
                }
            }

        })
    </script>

</body>

</html>

vue父子组件间的数据传递

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>父子组件的数据传递</title>
    <script src='./vue.js'></script>
</head>

<body>
    <!-- 不加冒号代表是字符串,加了冒号实际就是字符串表达式 -->
    <div id="root">
        <!-- //监听子组件的缩写  @   加名称 inc -->
        <counter :count="1" @inc="handleIncrease"></counter>
        <counter :count="2" @inc="handleIncrease"></counter>
        <!-- 上两行代码表示父组件 -->
        <div>{{total}} </div>
    </div>


    <script>
        var counter = {
            // 子组件 接收父组件传过来的数据
            props: ['count'],
            data: function() {
                return {
                    number: this.count
                }
            },
            template: '<div @click="handleClick">{{number}}</div>',

            methods: {
                handleClick: function() {
                    this.number = this.number + 2;
                    this.$emit('inc', 2)

                }
            }
        }
        var vm = new Vue({
            el: '#root',
            data: {
                total: 3
            },
            components: {
                counter: counter
            },
            // step接受参数
            methods: {
                handleIncrease: function(step) {
                    this.total += step
                }
            }

        })
    </script>

</body>

</html>

vue父子组件间的数据传递
此时的计数没有任何问题了

vue父子组件间的数据传递相关教程

  1. vue 实时监听数据实现报警功能

    vue 实时监听数据实现报警功能 项目需求: 项目中需要实时监听数据变化达到预定值后,会触发报警功能(报警弹窗提示) 问题描述: 1.前台在不断获取数据时候数据传输过程中,要避免数据一直积累,页面越来越卡; 2.该报警功能需要在所有页面中进行监听; 解决

  2. Cesium系列4 — Vue+Cesium开发环境搭建(基于Cesium1.74)

    Cesium系列4 — Vue+Cesium开发环境搭建(基于Cesium1.74) 1.搭建VUE项目 使用vue-cli工具创建一个vue项目:( 确保已安装node.js ) vue init webpack cesiumtest 2.用webstrom打开项目(其他编码工具也可以) 3.安装cesium 在配置文件package.json,中新加ce

  3. vue项目配置环境变量

    vue项目配置环境变量 配置环境变量官方文档 配置环境变量的两种方式 1.在根目录创建.env文件并创建变量 环境变量的命名必须是:VUE_APP_XXX 环境变量声明方式:“键=值”对 2.配置文件作用范围 3.配置配置文件 1.html中使用环境变量 2.组件中使用环境变量 //.

  4. Vue echarts4 热力图

    Vue echarts4 热力图 下面图1为echarts官网上的一个实例,简单的利用点坐标进行热力图渲染,略显粗糙,不是很符合项目要求,图2为在echarts gallery上找到的一个热力图实例。 下面为图2的配置项: var axisdata = [];for (var i = -5; i 5; i++) { axisdata.p

  5. vue中使用antv G6 的树图TreeGraph (紧凑树)①【新手学习向记

    vue中使用antv G6 的树图TreeGraph (紧凑树)①【新手学习向记录】 目前实现了两点: 1. 根据准备好的数据生成树形图 2. 根据数据数值改变节点以及节点文本颜色 百度上关于g6树形图的文章挺少的,因为g6功能很齐全非常庞大 (非常用心的在做图表,真的好用)

  6. 前端vue excel导出数据流

    前端vue excel导出数据流 项目中有一个导出功能的实现,用博客来记录一下。因为需求对导出表格的数据格式和样式有要求,所以这个导出功能放到后端来做,而且后端返回的是数据流,所以需要处理成想要的表格并导出来。 先看下效果图: 页面效果: 点击 导出Exce

  7. vue组件

    vue组件 Vue组件 组件构造器和注册 全局组件和局部组件 父组件和子组件 注册组件的语法糖 注册全局组件的语法糖 注册局部组件的语法糖 组件模板抽离 组件构造器和注册 vue组件的基本使用步骤和实现: 组件的使用分为三个步骤: 1.创建组件构造器 2.注册组件 3

  8. Vue报错Cannot find module ‘webpack-cli/bin/config-yargs‘

    Vue报错Cannot find module ‘webpack-cli/bin/config-yargs‘ npm i webpack-dev-server -D 把这个工具安装到项目本地开发依赖 注意:webpack-dev-server 这个工具依赖 webpack,必须在本地(项目中)安装 webpack 安装完成后,执行命令 npm run dev 发现报错