提交

src/views/test/ancestor.vue

@@ -0,0 +1,31 @@
+<template>
+    <div id="ancestor">
+     <Parent :keys="keys" />
+    </div>
+   </template>
+   
+   <script>
+   import Parent from '@/views/test/components/parent'
+   
+   export default {
+    name: 'ancestor',
+    components: {
+     Parent
+    },
+    provide() {
+     return {
+      obj: this.obj
+     }
+    },
+    data() {
+     return {
+      title: 'ancestor',
+      keys: 1998,
+      obj: {
+       set: '我是爷爷组件传'
+      }
+     }
+    }
+   }
+   </script>
+   

src/views/test/components/parent.vue

@@ -0,0 +1,46 @@
+<template>
+    <div id="parent">
+     <div class="head_box">
+      <el-button  type="primary" @click="parentEvent">我是父亲</el-button> 
+      <Son @dd="dd" ref="hello1" :value="d" />
+      <Son2 :value="f" ref="hello2" />
+     </div>
+    </div>
+   </template>
+   
+   <script>
+    import Son from '@/views/test/components/son'
+   import Son2 from '@/views/test/components/son2'
+   export default {
+    name: 'parent',
+    components: {
+        Son,
+        Son2
+    },
+    provide(){ 
+       // content:'传给子组件的内容'
+       return {
+        content:this.index
+       }
+    },
+    data() {
+     return {
+      index: '我是父组件传过来的值',
+      d:1,
+      f:2,
+      msg:'我是父组件的值$parent'
+     }
+    },
+    mounted(){
+
+    },
+    methods:{
+     parentEvent() {
+      console.log('通过$parent调我的方法');
+      this.$refs.hello1.add();
+      console.log(this.$refs.hello1.f);
+     },
+    }
+   }
+   </script>
+   

src/views/test/components/son.vue

@@ -0,0 +1,40 @@
+<template>
+    <div>
+    <div>孙子组件:{{ dd}}</div>
+    <el-button type="primary" @click="fun2">主要按钮</el-button>
+    <el-button type="primary" @click="add">$parent获取父组件的</el-button>   
+   </div>
+</template>
+   
+   <script>
+   import event from '@/views/test/event.js'
+   export default {
+    name: 'son',
+    data() {
+     return {
+      index: 1,
+      dd:'',
+      str:'我是兄弟1传过来的值',
+      f:'父组件通过$refs取我的值'
+     }
+    },
+    mounted(){
+        event.$on("dd", (e) => {
+           this.dd = e.str
+       })
+     
+    },
+    methods:{
+        fun2(){
+            event.$emit('child',this.str)
+        },
+        add(){
+            console.log("我是子组件")
+             console.log(this.$parent.msg)
+             this.$parent.parentEvent();
+        },
+        
+    }
+   }
+   </script>
+   

src/views/test/components/son2.vue

@@ -0,0 +1,44 @@
+<template>
+    <div>
+        <div>孙子2组件:{{obj.set}}</div>
+        <div>孙子2组件:{{content}}</div>
+        <el-button type="primary" @click="fun1">主要按钮</el-button>
+        <p>测试:{{ pp }}</p>
+
+    </div>
+   </template>
+   
+   <script>
+   import event from '@/views/test/event.js'
+   export default {
+    name: 'son2',
+    provide(){ 
+       // content:'传给子组件的内容'
+       return {
+        xdzj:this.xdzj
+       }
+    },
+    inject:['obj','content'],
+    data() {
+     return {
+      index: 1,
+      pp:'',
+      xdzj: {
+        str:'我是兄弟2传过来的值'
+      }
+     }
+    },
+    mounted(){
+        event.$on('child',(e)=>{
+           this.pp = e
+        }) 
+    },
+
+    methods:{
+      fun1(){
+        event.$emit('dd',this.xdzj)
+      }
+    }
+   }
+   </script>
+   

src/views/test/event.js

@@ -0,0 +1,5 @@
+import Vue from 'vue'
+
+var bus = new Vue()
+
+export default bus