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选项声明它预期的数据 ...
随机推荐
- Angular开发者指南（六）作用域
什么是作用域? 作用域是引用应用程序模型的对象. 它是表达式的执行上下文. 作用域以层次结构排列,模仿应用程序的DOM结构,它可以观察表达式和传播事件. 作用域的特征 Scope提供API($watc ...
- deeplearning.ai 序列模型 Week 2 NLP & Word Embeddings
1. Word representation One-hot representation的缺点:把每个单词独立对待,导致对相关词的泛化能力不强.比如训练出“I want a glass of ora ...
- hadoop报错：could only be replicated to 0 nodes, instead of 1
错误 [root@hadoop test]# hadoop jar hadoop.jarcom.hadoop.hdfs.CopyToHDFS 14/01/26 10:20:00 WARN hdfs.D ...
- [洛谷P4777] [模板] 扩展中国剩余定理
扩展中国剩余定理,EXCRT. 题目传送门 重温一下中国剩余定理. 中国剩余定理常被用来解线性同余方程组: x≡a[1] (mod m[1]) x≡a[2] (mod m[2]) ...... x≡a ...
- RxJS学习笔记之Subject
本文为原创文章,转载请标明出处 目录 Subject BehaviorSubject ReplaySubject AsyncSubject 1. Subject 总的来说,Subject 既是能够将值 ...
- 自研测试框架ktest介绍（适用于UI和API）
iTesting,爱测试,爱分享 在自动化测试的过程中,测试框架是我们绕不过去的一个工具,无论你是不需要写代码直接改动数据生成脚本,还是你需要检查测试结果甚至持续集成,测试框架都在发挥它的作用. 不同 ...
- 20170220-coroutine
协程 coroutine 最近频繁的听说到 "协程" 这个词,花了一段时间肤浅的研究了一下.对于 "它是一个什么东西" 有了一个大概的了解. from wiki ...
- hexo+github搭建自己的博客
之前很早就想用hexo弄一个自己独立的博客了,在博客园也写了很多的博客,不过不喜欢博客园的风格.不过今天,终于折腾成功了,用hexo搭建了一个在github写的博客,开心,后面会将自己以前的博客慢慢迁 ...
- 【桌面篇】Archlinux安装kde桌面
ArchLinux安装配置手册[桌面篇] 现在你的U盘可以拔掉了,重启后会发现和刚刚没什么区别,还是命令行的界面,别着急现在就带你安装桌面环境. 连接网络 首先检查一下网络是否连接成功 ping ww ...
- ndarray数组的索引和切片
索引:获取数组中特定位置元素的过程 切片:获取数组元素子集的过程 import numpy as np 一维数组 一维数组的索引和切片与python中的列表类似 索引:若元素个数为n,则索引下标可表示 ...