vue组件通信（props,$emit,$attrs,$listeners）
vue基础----组件通信（props,$emit,$attrs,$listeners）
一、父传子，子传孙
1. props
1>在父组件中通过子组件自定义的标签属性来传递数据。
2>在子组件中通过props声明希望用到的数据
1 <body>
2 <div id="app">
3 <my-father :msg1="msg" a="10" :b="20" @click1="fn"></my-father>
4 </div>
5 <script src="./node_modules/vue/dist/vue.js"></script>
6 <script>
7 let vm = new Vue({
8 el:"#app",
9 data:{
10 msg:"hello yilia"
11 },
12 methods:{
13 fn(){
14 console.log("father");
15 }
16 },
17 components:{
18 "my-father":{
19 // props:['msg1'],
20 // template:`<div><h1>{{msg1}}</h1><my-son :msg2="msg1"></my-son></div>`,
21 created(){
22 console.log(this.$attrs);
23 console.log(this.$listeners);
24 console.log(this);
25
26 },
27 template:`<div><h1></h1><my-son v-bind="$attrs" v-on="$listeners"></my-son></div>`,
28 data(){
29 return {
30
31 }
32 },
33 components:{
34 "my-son":{
35 props:['msg1'],
36 template:`<p @click="$listeners.click1()">{{msg1}}</p>`,
37 inheritAttrs:true,
38 data(){
39 return{
40 }
41 }
42 }
43 }
44 }
45 }
46 });
47
48 </script>
49
50 </body>
1.1这里需要注意的props 除了上述这种写法，还可以写成对象形式，来校验数据
1 props: {
2 a: {
3 type: Number,
4 default: 10
5 },
6 b: {
7 type: String,
8 validator(val) {
9 return val>0; // "2">0
10 }
11 },
12 arr: {
13 type: Array,
14 //假如属性是数组或对象 默认值需要通过函数返回
15 default:()=>([1])
16 }
17 },
2.有时候my-father这块用不到数据，但需要把爷爷的数据传给孙子，可以用$attrs,在 my-son v-bind="$attrs"
this.$attrs 对没有使用的属性保留在this.$attrs (也就是props中没有申明的属性)
1 <body>
2 <div id="app">
3 <my-father :msg1="msg" a="10" :b="20" @click="fn"></my-father>
4 </div>
5 <script src="./node_modules/vue/dist/vue.js"></script>
6 <script>
7 let vm = new Vue({
8 el:"#app",
9 data:{
10 msg:"hello Yilia"
11 },
12 methods:{
13 fn(){
14 console.log("father");
15 }
16 },
17 components:{
18 "my-father":{
19 // props:['msg1'],
20 template:`<div><h1></h1><my-son v-bind="$attrs"></my-son></div>`,
21 data(){
22 return {
23 }
24 },
25 components:{
26 "my-son":{
27 props:['msg1'],
28 template:`<p>{{msg1}}</p>`,
29 inheritAttrs:true, //为false的时候，没有用到的数据不会显示在dom结构上
30 data(){
31 return{
32 }
33 }
34 }
35 }
36 }
37 }
38 });
39 </script>
40 </body>
二、点击子组件，调用父组件的方法 (想在父组件中绑定原生事件给组件)
1.需要添加修饰符native,不添加就被当作一个属性对待
1 <body>
2 <div id="app">
3 <!--想在父组件中绑定原生事件给组件 需要加.native 不加就被当作一个属性看待-->
4 <my-button @click.native="fn"></my-button>
5 </div>
6 <script src="./node_modules/vue/dist/vue.js"></script>
7 <script>
8 let vm = new Vue({
9 el: "#app",
10 methods:{
11 fn() {
12 console.log("fn() is called");
13 }
14 },
15 components: {
16 "MyButton": {
17 template: `
18 <div>
19 点我
20 </div>`
21 }
22 }
23 });
24 </script>
25 </body>
点击 “点我” 的时候父组件的fn函数被调用。
2.$listeners 绑定所有的方法，直接调用父组件的方法
1 <body>
2 <div id="app">
3 <!--想在父组件中绑定原生事件给组件 需要加.native 不加就被当作一个属性看待-->
4 <my-button @click="fn"></my-button>
5 </div>
6 <script src="./node_modules/vue/dist/vue.js"></script>
7 <script>
8 let vm = new Vue({
9 el: "#app",
10 methods:{
11 fn() {
12 console.log("fn() is called");
13 }
14 },
15 components: {
16 "MyButton": {
17 mounted(){
18 console.log(this.$listeners);
19 //{click: ƒ}
20 },
21 template: `<div @click="$listeners.click()">点我</div>`
22 }
23 }
24 });
25 </script>
26 </body>
3.子组件想调用父组件的方法 $emit
1 <body>
2 <div id="app">
3 <!--想在父组件中绑定原生事件给组件 需要加.native 不加就被当作一个属性看待-->
4 <!--<my-button @click.native="fn"></my-button>-->
5 <my-button @click="fn" @mouseup="fn"></my-button>
6 </div>
7 <script src="../01-vue-basic/code/node_modules/vue/dist/vue.js"></script>
8 <script>
9 // 组件通信 props $emit $attrs $listeners
10 /*
11 子如何传父
12 1 在子组件中调用$emit()方法发布一个事件
13 2 在父组件中提供一个在子组件内部发布的事件处理函数
14 3 在父组件订阅子组件内部发布的事件
15 */
16 let vm = new Vue({
17 el: "#app",
18 data: {
19 content: "点我"
20 },
21 methods:{
22 fn(num) {
23 console.log(num,"fn() is called");
24 }
25 },
26 components: {
27 "MyButton": {
28 mounted() {
29 console.log(this.$listeners);// 绑定所有的方法
30 },
31 template: `
32 <div>
33 <button @click="$listeners.click(123);">点我</button>
34 <button @click="$emit('click2',23)">点我</button>
35 <button @click="$listeners.click(123);" @mouseup="$listeners.mouseup(123);">点我</button>
36 <button v-on="$listeners" >点我</button>
37 </div>
38 `
39 }
40 }
41 });
42 </script>
43 </body>
vue组件通信（props,$emit,$attrs,$listeners）的更多相关文章
- Vue - 组件通信之$attrs、$listeners
前言 vue通信手段有很多种,props/emit.vuex.event bus.provide/inject 等.还有一种通信方式,那就是 $attrs 和 $listeners,之前早就听说这两个 ...
- vue 父子组件通信props/emit
props 1.父组件传递数据给子组件 父组件: <parent> <child :childMsg="msg"></child>//这里必须要 ...
- vue组件通信新姿势
在vue项目实际开发中我们经常会使用props和emit来进行子父组件的传值通信,父组件向子组件传递数据是通过prop传递的, 子组件传递数据给父组件是通过$emit触发事件来做到的.例如: Vue. ...
- 【Vue组件通信】props、$ref、$emit，组件传值
1.什么是组件通信 组件间如何通信,也就成为了vue中重点知识,组件通信,涉及到组件之间数据的传递.类似NET POST/GET参数传递. Vue基本的三种传递方式** (props.\(ref.\) ...
- vue组件通信的几种方式
最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child ...
- vue 组件通信
组件 组件之间的数据是单向绑定的. 父组件向子组件通信 是通过子组件定义的props属性来实现.通过props定义变量与变量类型和验证方式. props简化定义 在简化定义中,变量是以数组的方式定义. ...
- VUE 组件通信总结
1.prop 父组件传递给子组件,即通过VUE本身具有的Props属性来传递值 Child组件 <template> <span>{{message}}</span> ...
- vue组件通信那些事儿
一.说说通信 通信,简言之,交流信息.交流结束后,把信息放在哪里,这是一个值得思考的问题.vue中保存状态有2种方式,组件内的data属性和组件外的vuex的state属性. 1.用state的场景 ...
- vue组件通信&&v兄弟组件通信eventbus遇到的问题（多次触发、第一次不触发）
组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的 (vuex以后再说). 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <templ ...
随机推荐
- [LC] 83. Remove Duplicates from Sorted List
Given a sorted linked list, delete all duplicates such that each element appear only once. Example 1 ...
- ionic2踩坑之ionic resources失败
网上关于ionic2怎么修改应用图标和启动画面资料也挺多的.不过大家执行ionic resources的时候不少人都执行失败了,关于执行失败的原因网上很少.下面分享一下我的经验吧. 1.看自己的项目下 ...
- 吴裕雄--天生自然HTML学习笔记：HTML 图像
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- axios学习笔记
axios学习笔记axios文档源地址:https://github.com/axios/axios0.概念axios 在NPM上的描述是:Promise based HTTP client for ...
- EL表达式详细教程
EL 全名为Expression Language EL 语法很简单,它最大的特点就是使用上很方便.接下来介绍EL主要的语法结构: ${sessionScope.user.sex} 所有EL都是以${ ...
- curator配置及使用
1.action.yml --- actions: 1: action: index_settings options: index_settings: index: routing.allocati ...
- 从TP-Link到雷蛇，纷纷入局智能手机业到底想干什么？
"眼看他起朱楼,眼看他宴宾客,眼看他楼塌了",这句形容世态炎凉的话其实与智能手机市场更为相像.诺基亚的辉煌与没落.黑莓的强势与消声无迹.摩托罗拉的数次易手.小米的横空出世与 ...
- RocketMQ 单机版安装并测试
一.安装maven 1.下载maven,http://maven.apache.org/download.cgi,并解压: -bin.tar.gz 2.修改系统环境变量,并验证: vim /etc/p ...
- NERDTree快捷键
切换工作台和目录 ctrl + w + h 光标 focus 左侧树形目录ctrl + w + l 光标 focus 右侧文件显示窗口ctrl + w + w 光标自动在左右侧窗口切换ctrl + w ...
- 万达乐园VS阿里帝国 谁将是未来娱乐产业的龙头？
国内实体行业大佬王健林和互联网行业巨头马云,这次又不约而同地想到一块去了.从王健林叫板迪士尼大搞借势营销,到最近马云成立大文娱工作领导小组,明显的趋势表明娱乐越来越成为各界大佬们未来掘金的新战场.只不 ...