zoukankan      html  css  js  c++  java
  • Vue父子组件的数据传递

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>父子组件传值</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="root">
            <!--加上冒号是让"0","1"成为js表达式,不是字符串-->
            <counter :count="1" @inc="handleIncrease"></counter>
            <counter :count="3" @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) //每次点击按钮都是向外触发inc事件,步长为2
                }
            }
        };
    
    
        var vm = new Vue({
            el: '#root',
            data:{
              total:4
            },
            //注册子组件
            components: {
                counter: counter
            },
            methods:{
                handleIncrease:function (step) {
                    this.total +=2
                }
            }
        })
    </script>
    </body>
    </html>
    
    <!--
    父组件向子组件传递数据:通过属性的形式向子组件传递数据,
                           父组件向子组件随意的传递参数,但是子组件不能随意修改父组件传递过来的参数(单项数据流)
                           解决上述问题吧办法一:在子组件中创建data对象,创建副本,返回自己的number数据,修改自己就可以了
    
    子组件向父组件传递数据:this.$emit
    -->
  • 相关阅读:
    线段树学习笔记
    树状数组学习笔记
    P1816 忠诚 ST表模版
    NOIP 2017 D1T2 时间复杂度
    Ubuntu镜像源
    字符串数据结构模板
    白书的一些奇怪模板
    高精度模板
    大整数类模板
    线段树模板1
  • 原文地址:https://www.cnblogs.com/xuyxbiubiu/p/9987010.html
Copyright © 2011-2022 走看看