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> 在子组件中调用$emit()方法发布一个事件

2> 在父组件中提供一个在子组件内部发布的事件处理函数

3> 在父组件订阅子组件内部发布的事件

 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>

来源:https://www.cnblogs.com/moon-yyl/p/11613787.html

原文地址:https://www.cnblogs.com/ympjsc/p/12273295.html

时间: 2024-10-29 18:39:54

vue组件通信(props,$emit,$attrs,$listeners)的相关文章

Vue 组件通信

今天学习了,vue组件通信本篇随笔主要对今天的学习成果进行总结.有什么不对的地方还望谅解! 首先,Vue的核心即组件化开发,所以组件通信就显得十分重要. 组件通讯包括:父子组件间的通信和兄弟组件间的通信. 1.子组件获取父组件中数据间: var Child={ template:"#child", props:['mes'], data:function(){ return { data:this.$props.mes, //调用该子组件 props 中的对应属性的属性值: } } 通

Vue组件通信模式

概述 在Vue.js中,有几种我们能用的内部组件通信的方法.一般的属性和事件对于大多数场景来说已经够用了,但是除此之外,还有其他可用的方法. 属性和事件 当然,一般的通信方法用到了属性和事件.这种常用的模式是组件中一种强大的通信方式,它不用在相关的组件上引入任何依赖和限制. 属性 属性允许你传递任意的数据类型到一个子组件中,并且允许你控制组件接收何种类型的数据.属性的更新也是响应式的,这使得无论任何时候,父组件的数据改变,子组件就会更新. 模板用法: 123 <my-component v-bi

vue组件通信

1.子组件如何快速改变父组件中传过来的值(通过引用传递的方式给子组件,子组件可以直接改变对象中的属性) // App.vue <template> <div> <News :a-msg="msg" :out-data="outData"></News> {{msg}} <h3>{{outData.a}}</h3> </div> </template> <script

vue组件通信的几种方式

最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建props,然后创建一个名为message的属性 child.png 3.在App.vue中注册Child组件,并在template中加入child标签,标签中添加message属性并赋值 App2.png 4.保存修改的文件,查看浏览器 browser.png 5.我们依然可以对m

Vue组件选项props

前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息.本文将详细介绍Vue组件选项props 静态props 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,需要通过子组件的 props 选项 使用Prop传递数据

vue组件通信传值——Vuex

一.Vuex介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. Vuex 也集成到 Vue 的官方调试工具devtools extension,提供了诸如零配置的 time-tavel 调试.状态快照导入导出等高级调试功能. 1.状态管理模式 一个简单的 Vue 计数应用范例如下所示: new Vue({ // state data () { return { count: 0 } }

Vue 组件通信(组件间通信)

1.中央事件总线bus <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>Vue</title> </head> <body> <div id="app"> <p>{{message}}</p> <my-compone

Vue组件通信之非父子组件传值

前言: 如果想要了解非父子关系的组件传值,最好是在了解父传子和子传父的基础上在来了解非父子传值可能会有更透彻的思路. 因为非父子传值是通过定义事件总线来代理实现父传子+子传父从而实现的传值方式. 这是我总结的父子传值相关的知识,可供参考: https://www.cnblogs.com/ViavaCos/p/11712131.html 然后大概回顾一下父子传值的过程: 根据上述信息可知,如果两个组件需要传递值那么需要这两个组件之间是父子关系才能传递数据. 那么如果有这样一个组件,既可以帮你传递数

VUE组件通信(父传子)

首先把父组件要传输的数据用自定义属性绑定在标签上 <father :father_data=' data '></father> 在子组件中用prpos接收 const childcomponent = { template:'<child>{{son_data}}</child>', props:[' father_data'], //props['属性名'] (在父组件中用来绑定数据的属性名) data(){ return{ //用来接收数据的变量 so