vue基础----组件通信（props,$emit,$attrs,$listeners）
一、父传子，子传孙
1. props
1>在父组件中通过子组件自定义的标签属性来传递数据。
2>在子组件中通过props声明希望用到的数据
<body>
<div id="app">
<my-father :msg1="msg" a="10" :b="20" @click1="fn"></my-father>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
msg:"hello yilia"
},
methods:{
fn(){
console.log("father");
}
},
components:{
"my-father":{
// props:['msg1'],
// template:`<div><h1>{{msg1}}</h1><my-son :msg2="msg1"></my-son></div>`,
created(){
console.log(this.$attrs);
console.log(this.$listeners);
console.log(this); },
template:`<div><h1></h1><my-son v-bind="$attrs" v-on="$listeners"></my-son></div>`,
data(){
return { }
},
components:{
"my-son":{
props:['msg1'],
template:`<p @click="$listeners.click1()">{{msg1}}</p>`,
inheritAttrs:true,
data(){
return{
}
}
}
}
}
}
}); </script> </body>
1.1这里需要注意的props 除了上述这种写法，还可以写成对象形式，来校验数据
props: {
a: {
type: Number,
default: 10
},
b: {
type: String,
validator(val) {
return val>0; // "2">0
}
},
arr: {
type: Array,
//假如属性是数组或对象 默认值需要通过函数返回
default:()=>([1])
}
},
2.有时候my-father这块用不到数据，但需要把爷爷的数据传给孙子，可以用$attrs,在 my-son v-bind="$attrs"
this.$attrs 对没有使用的属性保留在this.$attrs (也就是props中没有申明的属性)
<body>
<div id="app">
<my-father :msg1="msg" a="10" :b="20" @click="fn"></my-father>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
msg:"hello Yilia"
},
methods:{
fn(){
console.log("father");
}
},
components:{
"my-father":{
// props:['msg1'],
template:`<div><h1></h1><my-son v-bind="$attrs"></my-son></div>`,
data(){
return {
}
},
components:{
"my-son":{
props:['msg1'],
template:`<p>{{msg1}}</p>`,
inheritAttrs:true, //为false的时候，没有用到的数据不会显示在dom结构上
data(){
return{
}
}
}
}
}
}
});
</script>
</body>
二、点击子组件，调用父组件的方法 (想在父组件中绑定原生事件给组件)
1.需要添加修饰符native,不添加就被当作一个属性对待
<body>
<div id="app">
<!--想在父组件中绑定原生事件给组件 需要加.native 不加就被当作一个属性看待-->
<my-button @click.native="fn"></my-button>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
methods:{
fn() {
console.log("fn() is called");
}
},
components: {
"MyButton": {
template: `
<div>
点我
</div>`
}
}
});
</script>
</body>
点击 “点我” 的时候父组件的fn函数被调用。
2.$listeners 绑定所有的方法，直接调用父组件的方法
<body>
<div id="app">
<!--想在父组件中绑定原生事件给组件 需要加.native 不加就被当作一个属性看待-->
<my-button @click="fn"></my-button>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
methods:{
fn() {
console.log("fn() is called");
}
},
components: {
"MyButton": {
mounted(){
console.log(this.$listeners);
//{click: ƒ}
},
template: `<div @click="$listeners.click()">点我</div>`
}
}
});
</script>
</body>
3.子组件想调用父组件的方法 $emit
<body>
<div id="app">
<!--想在父组件中绑定原生事件给组件 需要加.native 不加就被当作一个属性看待-->
<!--<my-button @click.native="fn"></my-button>-->
<my-button @click="fn" @mouseup="fn"></my-button>
</div>
<script src="../01-vue-basic/code/node_modules/vue/dist/vue.js"></script>
<script>
// 组件通信 props $emit $attrs $listeners
/*
子如何传父
1 在子组件中调用$emit()方法发布一个事件
2 在父组件中提供一个在子组件内部发布的事件处理函数
3 在父组件订阅子组件内部发布的事件
*/
let vm = new Vue({
el: "#app",
data: {
content: "点我"
},
methods:{
fn(num) {
console.log(num,"fn() is called");
}
},
components: {
"MyButton": {
mounted() {
console.log(this.$listeners);// 绑定所有的方法
},
template: `
<div>
<button @click="$listeners.click(123);">点我</button>
<button @click="$emit('click2',23)">点我</button>
<button @click="$listeners.click(123);" @mouseup="$listeners.mouseup(123);">点我</button>
<button v-on="$listeners" >点我</button>
</div>
`
}
}
});
</script>
</body>
vue基础----组件通信（props,$emit,$attrs,$listeners）的更多相关文章
- vue 父子组件通信props/emit
props 1.父组件传递数据给子组件 父组件: <parent> <child :childMsg="msg"></child>//这里必须要 ...
- vue基础----组件通信（$parent,$children）
1.按照dom的父子级关系,在子组件中可以通过$parent 直接调用父组件的方法,也可得到父组件的属性. 2.在父组件中通过$childrens可以得到一个子组件数组,能够在父组件中调用子组件的方法 ...
- vue 父子组件通信-props
父组件:引用了ComBack组件 ComBack组件:引用了BasicInfor组件 先使用props获取父组件的headInfo这个对象,这里注意(default)默认返回值要用工厂形式返回 Bas ...
- Vue 兄弟组件通信（不使用Vuex)
Vue 兄弟组件通信(不使用Vuex) 项目中,我们经常会遇到兄弟组件通信的情况.在大型项目中我们可以通过引入vuex轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入vuex.下 ...
- Vue兄弟组件通信
Vue兄弟组件通信之借助中央事件总线 下载链接:https://www.yinxiangit.com 其实要实现兄弟组件通信,就算是通过父子组件通信的方式也是可以达到的,如 子 ——>父——&g ...
- Vue父子组件通信（父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问）
Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...
- Vue中组件通信的几种方法（Vue3的7种和Vue2的12种组件通信）
Vue3组件通信方式: props $emit expose / ref $attrs v-model provide / inject Vuex 使用方法: props 用 props 传数据给子组 ...
- vue父子组件通信高级用法
vue项目的一大亮点就是组件化.使用组件可以极大地提高项目中代码的复用率,减少代码量.但是使用组件最大的难点就是父子组件之间的通信. 子通信父 父组件 <template> <div ...
- vue 父子组件通信
算是初学vue,整理一下父子组件通信笔记. 父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息. 一.父组件向子组件下发数据: 1.在子组件中显式地用props选项声明它预期的数据 ...
随机推荐
- HDU-6672-Seq
题目传送门 ps:一般这种给一个数列求第n项,n还特别大的.要么矩阵快速幂,要么转化递推式.不过这题数据也特别多有100000组,所以就算矩阵快速幂可能也要超时,而且我还没推出来.转化递推式需要比较强 ...
- 使用dtree构建框架导航
前言: 该例子就是个框架导航 , 左边包含dtree的框架,点击上面的节点右边框架显示 说明步骤: 1. 首先获得dtree http://www.destroydrop.com/javascrip ...
- 简单php递归无限mysql记录
<?php header('content-type:text/html;charget=gb2312'); $d=''; get_title($d,0,'='); function g ...
- spring security梳理
核心服务:AuthenticationManager,UserDetailsService和AccessDecisionManager The AuthenticationManager, Provi ...
- <JZOJ5904>刺客信条
然鹅考场上打错某变量名导致30都没有 调了很久因为 没转换double 死亡 #include<cstdio> #include<algorithm> #include< ...
- 印度IT产业今年裁员5.6万，自动化大潮下安有完卵
[腾讯科技编者按]业界媒体Quatz撰文指出,对于印度科技从业者来说,2017年是噩梦连连的一年.直到几年前,IT业都还是印度提供就业岗位最多的行业之一,但在今年,这个1600亿美元规模的行业裁掉了5 ...
- 2016/11/10 吃吃喝喝Hacking Thursday Night聚餐活动 at Dunkin Donuts
店名:Dunkin Donuts 唐恩都乐 点评:http://www.dianping.com/shop/21378231 地址:静安区南京西路1649号静安公园内(近静安公园) 走法:地铁2号线静 ...
- python常用魔术方法概览
构造和初始化 __init__(self, args) 构造函数 __new__(cls) 传入的是类实例 __del__(self) 析构函数,调用 del cls 时会被调用 属性访问控制 __g ...
- MHRD_Guide
@(Steam蒸汽动力)[MHRD|Game|How To] [CH]游戏解决方案 1.解决方案将作为完整的代码呈现,部分结决方案将有理论分析或图解. 2.根据记录板判断,解决方案远非理想. 3.慎重 ...
- Leetcode1353_最多可以参加的会议数目
题目地址 给定n个会议时间区间,会议不用全程参加,问最多能参加的数目. 时间区间按左端点排序,扫一遍,每一天把当天开始的区间结束时间加入,同时把这一天之前结束的区间删掉,然后贪心从最小堆取出结束时间的 ...