zoukankan      html  css  js  c++  java
  • 父子组件间的传值

    父子组件间通信

    父组件-->子组件

    1.父组件通过给子组件添加属性给子组件传值,子组件通过props来接受。

    2但是要在属性前加“:”,即使用v-bind指令,才能使属性值是js代码,不然就是字符串。

    3.单项输出流。即子组件不允许修改父组件传递的值,只能使用,不能修改。

    父组件通过属性向子组件传值时,如果传递的是引用型的值,这时候子组件对父组件传递的值进行修改可能会影响其他子组件对这个引用类型值的使用。

    解决办法:子组件在data项中新赋值父组件的变量,操作新的变量即可。

    子组件-->父组件

    通过事件this.$emit('方法名',参数)

    父组件监听子组件传递的事件 @事件名

    <body>
    <div id="root">
    <counter :count="3" @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:5
    },
    components:{
    counter:counter
    },
    methods:{
    handleIncrease:function(step){
    this.total+=step
    }

    }
    })
    </script>

    </body>

  • 相关阅读:
    数位DP
    组合
    卢卡斯Lucas&扩展卢卡斯
    [HNOI2014]道路堵塞
    [模板]三维凸包(无讲解)
    [CF526G]Spiders Evil Plan
    [CCPC2019 ONLINE]H Fishing Master
    [CCPC2019 ONLINE]E huntian oy
    [CF1037H]Security
    [CF1037F]Maximum Reduction
  • 原文地址:https://www.cnblogs.com/tengteng0520/p/12067048.html
Copyright © 2011-2022 走看看