vue中父传子和子传父，传值方法

1.关于传值的规则

props值是对象的时候，传递的属性以对象的形式保存在props里面，对象里面的字段可以对传递的属性进行验证或者添加一些匹配验证规则。

    <div id="app"><com1 :m="msg" :t="txt" :ind="90"></com1></div>
<script>Vue.component("com1",{template:`<div><p>{{m}}</p><p>{{t}}</p><p>{{ind}}</p></div>`,props:{// props值是对象的时候，传递的属性以对象的形式保存在props里面// 对象里面的字段可以对传递的属性进行验证或者添加一些匹配验证规则m:{required:true,//要求该属性必须传，不传就报错},t:{type:Number,//类型是数字default:200 //不传属性时默认为200，等同于函数的默认参数},ind:{// validator自定义匹配规则validator:function(v){return v > 20}}}})var app = new Vue({el:"#app",data:{msg:"你好",txt:10}})
</script>

2.父传子

父传子:通过自定义属性进行传值

1.在父组件使用子组件的时候，给子组件添加自定义属性，属性值为传递的数据

2.在子组件通过props接收父组件的数据，props值是数组，元素是自定义属性

3.使用的时候像data数据一样进行使用

  <div id="app"><p>{{msg}}</p><!-- 给组件添加的各种属性会直接作用于组件根节点上，直接与组件根节点的属性（类）进行合并 --><my-com :tt="msg" class="d1">     </my-com></div>Vue.component("MyCom",{template:`<div class="d2">{{age}}{{tt}}</div>`,data(){return {age:10}},// 接受传递过来的数据,使用的时候可以直接像data一样进行使用props:["tt"]})// 根组件var app = new Vue({el: "#app",data: {msg:"hello"}})

3.子传父

子传父

1 在父组件定义修改方法，需要传递参数的

2 在使用子组件的时候通过自定义事件绑定修改方法

3 在子组件里面在需要的地方通过this.$emit("事件名","子组件数据")进行触发事件并且把子组件数据传递到父组件中

<div id="app"><com @p="changeD1"></com>{{d1}}</div>
<script>Vue.component("com", {template: `<div><button @click="f1">点击传递数据</button></div>`,data() {return {msg: {txt: "明天出去玩",name: "许美女"},age: 18}},methods: {f1() {this.$emit("p", [this.msg, this.age])}},})var app = new Vue({el: "#app",data: {d1: ""},methods: {changeD1(e) {this.d1 = e[0].nameconsole.log(this.d1);}},})
</script>

vue中父传子和子传父，传值方法相关推荐

Vue3中的父传子和子传父如何实现
大家都知道Vue2中父传子是通过父组件绑定一个属性,子组件再用props进行接收,子传父是通过this.$emit那么Vue3中有什么不同呢?以下为您解答谜团 #Vue3的父传子一.现在父组件调用子 ...
vue组件,父传子、子传父、父调子、子调父简单理解总结
总结目录方法总结子组件获取父组件变量(也可用父组件调用子组件中的方法传值) 父组件获取子组件变量(介绍两种方法) 父组件调用子组件中的方法子组件调用父组件中方法(介绍两种方法) 方法总结 vue ...
vue 组件之间传值父转子，子传父，同级别之间的传参，跨级别传参
写这篇文章之前,我对vue组件之间的传值,还是只知道一些基础的传值方式.虽然工作中勉强能够应对,但是想要行云流水感觉还是心有余而力不足,所以在此,我想总结一下vue组件之间的一些传值方式供大家参考,同 ...
vue 父组件调子组件方法_vue父组件调用子组件有哪些方法
这次给大家带来vue父组件调用子组件有哪些方法,vue父组件调用子组件的注意事项有哪些,下面就是实战案例,一起来看一下. 情景: 父组件中引入上传附件的子组件:点击组件可以分别上传对应要求的图片,子组 ...
vue父组件向子组件动态传值的两种方法
在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片,因为有时候获取到的会是空 ...
Vue父组件访问子组件属性和方法、父子组件双向绑定（两种方法）
Vue父组件访问子组件属性和方法.父子组件双向绑定(两种方法) 1. 使用vue-cli创建项目目录结构如下图: 2. 编写代码 src/components/HelloWorld.vue < ...
vue组件化通信之子向父传值
vue组件化通信之子向父传值 vue组件化通信之兄弟组件传值 vue中子向父传递消息一般使用$emit,方法比较简单,直接看代码父组件 <template><div>< ...
js父页面和子页面之间传值
今天和朋友一块讨论,怎样通过js在父页面和子页面之间传值的问题,总结例如以下: 需求描写叙述:父页面有多个子页面.实如今父页面点击子页面,传值到子页面. 看着非常easy,试了好久.主要纠结在怎样获取 ...
二维数组更改vue_使用vue中的v-for遍历二维数组的方法
如下所示: {{itemss}} 其中,data数据为: this.data = [ [ { type: '', name: '资产', start: '期末余额', end: '期初余额' }, { ...

vue中父传子和子传父，传值方法

1.关于传值的规则

2.父传子

3.子传父

vue中父传子和子传父，传值方法相关推荐

最新文章

热门文章