父子组件中的传值

父向子    v-bind props

 <!-- 组件使用v-bind传值 -->
<router :msg="msg"></router> 子组件:
<p>子组件 ----- {{msg}}</p> props: ["msg"], //props接收

props:验证

props: {
// fooA只接受数值类型的参数
fooA: Number,
// fooB可以接受字符串和数值类型的参数
fooB: [String, Number],
// fooC可以接受字符串类型的参数,并且这个参数必须传入
msg: {
type: String,
required: true
},
// fooD接受数值类型的参数,如果不传入的话默认就是100
fooD: {
type: Number,
default: 100
},
// fooE接受对象类型的参数
fooE: {
type: Object,
// 当为对象类型设置默认值时必须使用函数返回
default: function() {
return { message: "Hello, world" };
}
},
// fooF使用一个自定义的验证器
fooF: {
validator: function(value) {
return value >= 0 && value <= 100;
}
},
  fooG: {
type:Array,
// 当为数组类型设置默认值时必须使用数组返回
default: function() {
return [];
}
},
}

props 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件修改父组件的状态。所以不应该在子组件中修改 props 中的值,Vue 警告。

这是我上次想修改父组件的值遇到的报错:

子向父  v-on $emit

子组件:
<button @click="cyy">按钮</button>
methods: {
cyy() {
this.$emit("zifu", "子组件向父组件传值", true);
}
} 父组件:
<router v-on:zifu="hehe"></router>
methods: {
hehe: function(data, data2) {
console.log(data, data2);
}
}

兄弟组件中的传值

第一个办法:父组件中转

<div> //爸爸A
<router></router> //哥哥A1
<vuex></vuex>    //弟弟A2
</div>

A1要向A2传值 、 可以用$emit传给A、A在使用v-bind传给A2

使用父组件做中转 这里不举例了只是把上面的子向父,父向子连起来用

第二个方法:Bus中央事件总线

新建一个Bus.js 页面

父组件组件代码:

<div> //爸爸A
<router></router> //哥哥A1
<vuex></vuex>    //弟弟A2
</div>

 哥哥A1组件:

<button @click="cyy">按钮</button> 点击按钮向弟弟A2传值
脚本中:
import Bus from "../api/Bus";   //注意引入
export default {
data() {
return {
a: 1
};
},
methods: {
cyy() {
Bus.$emit("zifu", this.a++, "子组件向兄弟组件传值"); //存 Bus.$emit
}
}
};

弟弟A2组件:

<p>接受兄弟A1传值=-------第{{ccc}}次,向{{ddd}}</p>
脚本中:
import Bus from "../api/Bus";
export default {
data() {
return {
ccc: "",
ddd: ""
};
},
created() {
Bus.$on("zifu", (val, val1) => { //取 Bus.$on
this.ccc = val;
this.ddd = val1;
});
}
};

传值就告一段落了~~~~~~~~~~~~by~~~

vue 父子组件传值,兄弟组件传值的更多相关文章

  1. vue 父子组件、兄弟组件传值

    参考文章:Vue2.0子同级组件之间数据交互 1.父组件可以使用 props 把数据传给子组件.2.子组件可以使用 $emit 触发父组件的自定义事件. (一)父组件给子组件传值,关键字:props ...

  2. VUE中的子父组件、兄弟组件之间相互传值,相互调用彼此的方法

    vue--组件传值 父组件传值给子组件--"props" 一.父组件--示例 <template> <child :choose-data="choos ...

  3. vue父子组件、兄弟组件之间的通信和访问

    注意:1. vue组件间的通信其实有很多种方法,最常用的还是属性传值.事件传值.vuex; 其他方法参考 https://juejin.im/post/5bd18c72e51d455e3f6e4334 ...

  4. vue的$emit 与$on父子组件与兄弟组件的之间通信

    本文主要对vue 用$emit 与 $on 来进行组件之间的数据传输. 主要的传输方式有三种: 1.父组件到子组件通信 2.子组件到父组件的通信 3.兄弟组件之间的通信 一.父组件传值给子组件 父组件 ...

  5. 埋坑一: vue中子组件调用兄弟组件方法

    小计: 开发中遇到子组件需要调用兄弟组件中的方法,如下写个小demo记录下心得,如果你有好的方法,请到评论区域指教 父组件示例代码: 组件功能解析: 通过$emit获取子组件事件,通过$ref调用子组 ...

  6. vue2.0 父子组件通信 兄弟组件通信

    父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...

  7. Vue 使用eventBus 实现兄弟组件间的通信

    实现方式:  主要是在相互通信的兄弟组件之中,都引入一个新的vue实例,然后通过分别调用这个实例的事件触发事件广播 和监听来实现通信和参数传递. 需求: a页面tree的增删改后,数据还是之前的老数据 ...

  8. Vue兄弟组件(非父子组件)状态共享与传值

      前言:网上大部分文章写的有点乱,很少有讲得易懂的文章. 所以,我写了篇在我能看得懂的基础上又照顾到大家的文章 =.= 作者:X1aoYE 备注:此文原创,转载请注明~  内容里的<br> ...

  9. 创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

    1.创建组件的方法   函数组件   class组件 1.1 函数组 无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类,通过函数形式或者 `ES6` 箭头 `functi ...

随机推荐

  1. jQuery选择器 大于 空格 波浪线 加号

    JQuery选择器 大于 空格 波浪线 加号的区别 元素遍历 符号 说明 空格 $(‘parent child’)表示获取parent下的所有的child节点(所有的子孙). 大于号 $(‘paren ...

  2. DirectX9:第一章 初始化Direct3D

    一.Direct3D概述 Direct3D是一套底层图形API,可以被视为应用程序与图形设备交互的中介. 应用程序.Direct3D以及硬件之间的交互关系: 在Direct3D和图形设备之间有一个环节 ...

  3. Flask:第一个Flask项目

    在上一篇文章:Flask:项目的准备工作中,我写了flask项目的准备工作,不清楚创建flask项目需要做哪些准备的朋友可以点击链接看看 1.最简单的Flask项目 代码: from flask im ...

  4. 知否知否,VS Code 不止开源

    VS Code, 昨夜始于“开源”,如今“开源”深处渡. 读者看到这句话,也许会有疑惑,为什么两个“开源”都加上了双引号? 其实是笔者有意为之,因为这个两个“开源”的意义有着很大的差别,第一个“开源” ...

  5. java核心编程书上的一个错误

    书上说这段代码说明了java对对象不是采用的按引用调用 这明显错了,java还是引用传递,只是把引用对象的变量复制了,互换了x,y所指的对象,对a,b没有影响

  6. AtCoder Grand Contest 036 A-C

    目录 \(\bf A - Triangle\) \(\bf B - Do\ Not\ Duplicate\) \(\bf C - GP 2\) \(\bf D - Negative \ Cycle\) ...

  7. [考试反思]1003csp-s模拟测试58:沉淀

    稳住阵脚. 还可以. 至少想拿到的分都拿到了,最后一题的确因为不会按秩合并和线段树分治而想不出来. 对拍了,暴力都拍了.挺稳的. 但是其实也有波折,险些被卡内存. 如果内存使用不连续或申请的内存全部使 ...

  8. [考试反思]0910csp-s模拟测试42:追求

    显而易见的暴力骗分. T1想到了bitset但是发现MLE后弃了,部分分都没拿. T2想到正解贪心打暴力过不了大样例弃了. T3牛逼题暴力. 考场没什么大失误,还可以. 不要轻易放弃每一个思路,可能再 ...

  9. CSPS模拟 49

    连续退步2333 我怎么这么不稳啊2333 看看人家大敛,天天AK 考后改了改sb错误就变40+80+100了... 但愿我的实力还在? T1 养fa 拿到题心想,这次一定把T1切了 开始研究这个见了 ...

  10. 深入理解C#第三版部分内容

     最近,粗略的读了<深入理解C#(第三版)>这本技术书,书中介绍了C#不同版本之间的不同以及新的功能. 现在将部分摘录的内容贴在下面,以备查阅. C#语言特性: 1.C#2.0 C#2的主 ...