zoukankan      html  css  js  c++  java
  • Vue props向子组件中传递数据

    Vue props向子组件中传递数据

    声明组件对象中定义 props

    1、在声明组件对象中使用 props 选项指定

    const MyComponent = {
    	template:'<div></div>',
    	props: 此处值有以下3中方式,
    	components:{
    	}
    }
    

    方式一:指定传递属性名,注意是数组形式。

    props:['id','name','sarlary','isPublished'] 
    

    方式二:指定属性名和数据类型,注意是对象形式。

    props:{
    	id:Number,
    	name:String,
    	salary:Number,
    	isPublished:Boolean,
    	commentIds:Array,
    	author:Object,
    	getEmp:Function
    }
    

    方式三:指定属性名、数据类型、必要性、默认值。

    props:{
    	name:{
    		type:String,
    		required:true,
    		default:'wjw'
    	}
    }
    

    引用组件时动态赋值

    在引用组件时,通过 v-bind 动态赋值

    <my-component v-bind:id="2" :name="wangjiawei" :salary="9999" :is-published="true" :comment-ids="[1,2]" :author="{name:'alan'}" :get-emp="getEmp">
    </my-component>
    

    传递数据注意

    1. props 值用于父组件向子组件传递数据。
    2. 所有标签属性都会成为组件对象的属性,模板页面可以直接引用。
    3. 问题:
      a. 如果需要向非子后代传递数据,必须是多层逐层传递。
      b. 兄弟组件间也不能直接 props 通信,必须借助父组件才可以。
  • 相关阅读:
    三种等待时间的区别
    多种测试的测试方法
    测试面试题总结
    自动化过程中定位不到元素时使用等待方法
    账号登录测试,多表查询
    TP商城添加购物车自动化测试
    二十四个球
    老鼠喝药
    购物车测试点
    前后端分页
  • 原文地址:https://www.cnblogs.com/wjw1014/p/13395113.html
Copyright © 2011-2022 走看看