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

    父组件向子组件传值

    1.父组件传递

    在父组件页面中引用子组件的标签上使用v-bind(简写为:)绑定需要传递的值

    <comment-box :id="id"></comment-box>
    

    2.子组件接收

    在子组件的vue实例中使用props接收父组件传递过来的值

    export default {
    	data(){},
    	props: ['id']
    }
    

    子组件向父组件传值

    1.父组件绑定事件

    • 父组件定义一个处理从子组件传过来的值的函数
    export default {
        methods: {
        	getSelectedCount(value){
                //函数内部处理从子组件传过来的值
            }
    	}
    }
    
    • 在父组件页面中引用子组件的标签上绑定这个处理函数
    <numberbox @getcount="getSelectedCount"></numberbox>
    

    2.子组件处理事件

    • 子组件是一个输入框,为其绑定change事件,监听value值的改变,并为其添加ref属性,方便取到该输入框的value值
    <input class="mui-input-numbox" type="number" value="1" @change="countChanged" ref="number"/>
    
    • 定义该change事件的处理函数,使用this.$emit触发父组件为子组件绑定的函数,并把父组件需要的值传过去
    export default {
        methods: {
            countChanged(){ 
                this.$emit('getcount',parseInt(this.$refs.number.value))
             }
        }
    }
    
  • 相关阅读:
    localhost和本机IP和127.0.0.1之间的区别
    git客户端msysGit和TortoiseGit使用
    JS正则
    css中外边距
    css定位浮动总结
    Teleport Ultra 抓包工具
    编程实践心得与设计思想
    Java 读写Properties配置文件
    如何成为一个优秀的DBA
    对DB2常见错误的列举以及破解方案
  • 原文地址:https://www.cnblogs.com/zhahuhu/p/11752834.html
Copyright © 2011-2022 走看看