vue组件之间通信，父传子，子传父，父调子，子调父

vue

• 组件之间通信

  • 父传子

    • 在引入的子组件用 “:” 绑定属性名=值

    • 在子组件props以对象的形式接收，并且定义类型

      <!-- 父组件 -->
      <template>
        <div>
          <input type="text" v-model="name" @click="click">
          //引入子组件
          <child :inputName="name" ref="clickChild" ></child>
        </div>
      </template>
      <script>
        //引入子组件
        import child from './child'
        export default {
          //注册组件
          components: {
            child
          },
          data () {
            return {
              name: ''
            }
          },
           methods:{
               
           }
        }
      </script>
      
      <!-- 子组件 -- >
      <template>
        <div>
          <span>{{inputName}}</span>
        </div>
      </template>
      <script>
        export default {
          // 接收父组件的值
          props: {
            inputName: String,
            required: true
          }
        }
      </script>
      

  • 父调用子的方法

    • 先在子组件写一个方法，用于父组件调用

    • 在父组件引入的子组件用 fef=“方法名”

    • 在父组件调用子组件的地方 this.$refs.方法名.子组件要调用的方法（）

      //父组件
      <template>
        <div>
          父组件:
          <input type="text" v-model="name" @click="clickChild">
          <!-- 引入子组件 -->
          <child :inputName="name" ref="child"></child>
        </div>
      </template>
      <script>
        import child from './child'
        export default {
          components: {
            child
          },
          data () {
            return {
              name: ''
            }
          },
            methods:{
            	clickChild(){
                  this.$refs.child.child()
                  //我是父组件调用子组件
              }
        }
        }
      </script>
      
      //子组件
      <template>
        <div>
          子组件:
          <span>{{inputName}}</span>
        </div>
      </template>
      <script>
        export default {
          // 接收父组件的值
          props: {
            inputName: String,
            required: true
          },
            data(){
                return{
                    
                }
            },
            methods:{
                //子方法用于父组件调用
                child(){
                    console.log("我是父调子的方法")
                }
            }
        }·
      </script>
      

  • 子传父

    • 先在子组件写一个点击事件，用于向父组件传值

    • 在要向父组件传值的地方用this.$emit(“自定义属性”，值)

    • 在父组件用v-on ":"接收，绑定自定义属性

    • 在父组件用wacth监听子组件传来的值，也可在methods方法里面接收

      //子组件
      <template>
        <div>
          子组件:
      	<button @click="Child"></button>
        </div>
      </template>
      <script>
        export default {
            data(){
                return{
                    msg:"我是子组件传过来的数据"
                }
            },
            methods:{
                //子组件自定义的方法
                child(){
                    //this.$emit("方法名"，值)
                    this.$emit("Child",this.msg)
                    console.log("我是父调子的方法")
                }
            }
        }·
      </script>
      
      //父组件
      <template>
        <div>
          父组件:
          <input type="text" v-model="name" @click="clickChild">
          <!-- 引入子组件 -->
          <child :Child="Child"  ></child>
        </div>
      </template>
      <script>
        import child from './child'
        export default {
          components: {
            child
          },
          data () {
            return {
              name: ''
            }
          },
            methods:{
            	Child(e){
                  console.log(e)
                  //e是子组件传过来的值
              }
        }
        }
      </script>
      

  • 子调用父的方法

    • this.$parent.父组件方法名：不同环境这个东西也不一样的。uniapp开发的h5页面需要两个，app端需要一个，具体还是自己根据实际情况

    • $emit向父组件触发一个事件，父组件监听这个事件

    • 把父组件把方法传入子组件中，在子组件里直接调用这个方法

      第一种使用this…$parent…父组件方法名

      //子组件
      <template>
        <div>
          子组件:
      	<button @click="Child"></button>
        </div>
      </template>
      <script>
        export default {
          data(){
              return{
                  msg:"我是子组件传过来的数据"
              }
          },
          methods:{
              child(){
                this.$parent.clickChild()
                //直接调用父组件的方法
              }
          }
        }
      </script>
      
      //父组件
      <template>
        <div>
          父组件:
          <input type="text" v-model="name" @click="clickChild">
        </div>
      </template>
      <script>
        import child from './child'
        export default {
          components: {
            child
          },
          data () {
            return {
              name: ''
            }
          },
            methods:{
              //父组件的方法
            	clickChild(e){
                  console.log(e)
              }
        }
        }
      </script>
      

      第二种$emit向父组件触发一个事件，父组件用于触发这个方法

      //子组件
      <template>
        <div>
          子组件:
      	<button @click="Child"></button>
        </div>
      </template>
      <script>
        export default {
          data(){
              return{
                  msg:"我是子组件传过来的数据"
              }
          },
          methods:{
              child(){
                this.$emit("clickChild")
              }
          }
        }
      </script>
      
      //父组件
      <template>
        <div>
          父组件:
          <input type="text" v-model="name" @clickChild="clickChild">
        </div>
      </template>
      <script>
        import child from './child'
        export default {
          components: {
            child
          },
          data () {
            return {
              name: ''
            }
          },
          methods:{
            clickChild(e){
              //子组件调用的方法
              console.log(e)
            }
        }
        }
      </script>
      

      第三种 把父组件把方法传入子组件中，在子组件里直接调用这个方法

      //父组件
      <template>
        <div>
          父组件:
          <input type="text" v-model="name" :clickChild="clickChild">
        </div>
      </template>
      <script>
        import child from './child'
        export default {
          components: {
            child
          },
          data () {
            return {
              name: ''
            }
          },
          methods:{
            clickChild(e){
              console.log("我是父组件的方法")
            }
        }
        }
      </script>
      
      //子组件
      <template>
        <div>
          子组件:
      	<button @click="Child"></button>
        </div>
      </template>
      <script>
        export default {
          props:{
            clickChild:Function
          },
          data(){
            return{
            }
          },
          methods:{
              child(){
                if(this.clickChild){
                  this.clickChild()
                }
              }
          }
        }
      </script>