Vue父子、兄弟组件通信

测试账号 2021-01-19 14:52 771阅读 0赞

### 1.父组件向子组件传参数 ###

*  父组件代码
````
    <template>
      <div>
        <input type="text" v-model="inpMessage">
        <button @click="handleClick">点击传给子组件</button>
         // message为子组件props接收的值，clickData为父组件要传的值
         // children标签就是子组件
        <children :message="clickData" /> 
      </div>
    </template>
     
    <script>
      //引入子组件
      import children from './page/children'
      
      export default {
        components:{
          children
        },
        data(){
          return{
            inpMessage:'',
            clickData:''
          }
        },
        methods:{
          handleClick(){
            //赋值
            this.clickData = this.inpMessage
          },
        }
      }
    </script>
     
    <style></style>
````
 *  子组件代码1【点击事件传值】
````
    <template>
        <div>
          <input type="text" v-model="childrenMessage">
          <p>{
       {childrenMessage}}<p>
        </div>
    </template>
     
    <script>
        export default {
          props:{
         	 // 接收父组件传过来的值，这是稍微高级一点的写法，也可以props:[' message'] 
         	 // type 类型有： String Number Boolean Function Object Array Symbol
              message:String  
          },
          data(){
              return{
                childrenMessage:''
              }
          },
          created(){
            this.childrenMessage = this.message  //初始化时候的赋值
          },
        }
    </script>
     
    <style scoped>
     
    </style>
````

*  子组件代码2【动态监听传值】
````
    <template>
        <div>
          <input type="text" v-model="childrenMessage">
        </div>
    </template>
     
    <script>
        export default {
          props:{
              message:String
          },
          data(){
              return{
                childrenMessage:''
              }
          },
          created(){
            this.childrenMessage=this.message
          },
          //这里用watch方法来监听父组件传过来的值，来实现实时更新
          watch:{
            message(val){    //message即为父组件的值，val参数为值
              this.childrenMessage = val    //将父组件的值赋给childrenMessage 子组件的值
            }
          }
     
        }
    </script>
     
    <style scoped>
     
    </style>
````
动态监听传值法有点需要注意的是， 必须要父组件对应变量有变化才会有响应。  
假设子组件变量childrenMessage变化后没有回传父组件，父组件还是set回原来的值，这里是不会被监听到。  
例如：当父组件的clickData = 0 传到子组件使得 childrenMessage = 0，然后子组件通过某种方式使得 childrenMessage = 1。然后，**没有把childrenMessage = 1 回传给父组件的clickData属性时**，即时父组件再次更改clickData = 0。 这样message(val)是无法监听到的。

所以接下来，我们来讲一下子组件如何改变父组件的值

### 2.子组件向父组件传参数 ###

vue是不允许子组件向父组件传值去改变父组件的值的，但是我们可以通过自定义事件的形式去改变值，例如点击事件，再通过$emit来传递。

*  父组件代码
````
    <template>
      <div>
        <input type="text" v-model="inpMessage">
        <button @click="handleClick">点击传给子组件</button>
          //@messageData为子组件声明传递过来的值，函数，getData为函数，val参数是传递过来的值
        <children :message="clickData" @messageData="getData"/>
      </div>
    </template>
     
    <script>
      import children from './page/children'
      export default {
        components:{
          children
        },
        data(){
          return{
            inpMessage:'',
            clickData:''
          }
        },
        methods:{
          handleClick(){
            this.clickData = this.inpMessage
          },
           //接收子组件传递的值，val参数是传递过来的值 ，给inpMessage 赋值，子组件改变父组件的值
          getData(val){
            this.inpMessage = val
            console.log(val)
          }
        }
      }
    </script>
     
    <style></style>
````
 *  子组件代码
````
    <template>
        <div>
          <input type="text" v-model="childrenMessage">
          <button @click="childClick">传值给父组件</button>
        </div>
    </template>
     
    <script>
        export default {
          props:{
              message:String
          },
          data(){
              return{
                childrenMessage:''
              }
          },
          created(){
            this.childrenMessage=this.message
          },
          methods:{
            //点击传值给父组件，通过$emit传递，第一个参数messageData相当于传播的媒介，this.childrenMessage为需要传递的值，后面也可以传递多个参数
            childClick(){
              this.$emit('messageData',this.childrenMessage)
              console.log(this.childrenMessage)
            }
          },
          watch:{
            message(val){
              this.childrenMessage = val
            }
          }
     
        }
    </script>
````
### 3.父组件调用子组件的js函数 ###

*  父组件代码
````
    <template>
        <div>
            <h1>我是父组件</h1>
            <child ref="child"></child>
        </div>
    </template>
    <script>
        import child from './child'
        export default{
            components:{ child },
            methods:{
                parent(){
                    this.$refs.child.childFn()
                }
            }
        }
    </script>
````
 *  子组件代码
````
    <template>
        <div>
           <h2>我是子组件</h2>
        </div>
    </template>
    <script>
        import child from './child'
        export default{
            components:{ child },
            methods:{
                childFn(){
                    alert('父组件调用了我')
                }
            }
        }
    </script>
````
### 4.兄弟组件相互传参 ###

同级（兄弟）组件间不能直接传递数据，需要建立一个类似桥梁的载体去实现。

1.  定义一个公共文件public.js，创建位置工程src目录下与main.js同级（代码内容是创建一个空的vue实例）：
    
        import Vue from 'vue'
        export default new Vue()
2.  创建好以后，同级（兄弟）组件分别引入public.js这个文件：
    
        import Public from '../public.js'
3.  例如现在有A.vue和B.vue两个同级（兄弟）组件，假设A.vue组件发送数据，通过$emit将事件和参数’传递’给B.vue（实际上是传递数据到public.js内）：
    
        price(newPrice){
        	const obj = {
        		a: "test",
        		b:"ass"
        	}
            Public.$emit('xx',obj)		//xx:定义传参，obj：所要传递的数据 
        }
4.  在B.vue组件里接收数据，通过$on将事件和数据从A.vue接收过来：
    
        //该代码可以写在mounted()方法里面
        Public.$on("xx", val=> {
            this.插值语句中需要渲染的变量名 = val
        });