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>

  • 相关阅读:
    NumPy 字符串函数
    NumPy 位运算
    Numpy 数组操作
    最小二乘法的原理与计算
    NumPy 迭代数组
    Making AJAX Applications Crawlable
    mac, start sublime from terminal
    Speed Up Your WordPress Site
    To Support High-Density Retina Displays
    HTML5 tricks for mobile
  • 原文地址:https://www.cnblogs.com/tengteng0520/p/12067048.html
Copyright © 2011-2022 走看看