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选项声明它预期的数据 ...
随机推荐
- MOOC（7）- case依赖、读取json配置文件进行多个接口请求-跳过测试用例（6）
初始化.跳过测试用例 # test_class_6.py import unittest from mock import mock from day_20200208_mooc.base.inter ...
- android greendao的外部封装不太友好。
https://github.com/greenrobot/greenDAO 下载下官网的示例,有完整的封装版本,但自已封装是碰到很多问题. 因greenDao的Master和Session中很多方法 ...
- 关于前端使用JavaScript无法实现canvas打印问题的解决
当使用浏览器的打印功能window.print()无法打印网页上的canvas图像,但是可以通过转换canvas成一个图片的形式来实现canvas的打印. 解决方法 getElementById获取c ...
- Data Binding on Android
Data Binbing框架是在2015年Google I/O大会上最早提出来的,一直在Android开发者中热议,但是很少有真正在项目中用到.本文简单介绍Data Binding框架的简单用法以及其 ...
- 吴裕雄--天生自然HTML学习笔记：HTML 脚本
JavaScript 使 HTML 页面具有更强的动态和交互性. <!DOCTYPE html> <html> <head> <meta charset=&q ...
- 吴裕雄--天生自然 R语言开发学习：回归（续四）
#------------------------------------------------------------# # R in Action (2nd ed): Chapter 8 # # ...
- 从0开始学正则表达式－基于python
关于正则表达式,当我们了解它就不难,不了解就很难,其实任何事情都是这样,没有人一生下来就啥都会,说白了,每个人都是一个学习了解进步的过程.学习和掌握正则表达式可能并不是太简单,因为它确实是有点像“外星 ...
- 中文字体压缩器-解决css引入的字体太大的问题
字蛛是一个中文字体压缩器 官方网站:http://font-spider.org/index.html 用于解决页面引入的css字体过大的问题 使用方法: npm i -g font-spider 在 ...
- 自研测试框架ktest介绍（适用于UI和API）
iTesting,爱测试,爱分享 在自动化测试的过程中,测试框架是我们绕不过去的一个工具,无论你是不需要写代码直接改动数据生成脚本,还是你需要检查测试结果甚至持续集成,测试框架都在发挥它的作用. 不同 ...
- openCryptoki安装
什么是OpenCryptoki OpenCryptoki提供Linux下的PKCS#11库和工具,支持包括TPM和IBM加密硬件以及软件令牌. 目前(2019/05/06)最新release版为3.1 ...