Vue - 组件传参

父子传参

父组件

<template>
    <div class='parent'>
        父组件
        <Child msg='msg' :data='data'></Child>
  </div>
</template>
<script>
 import Child from './Child'
export default {
    name:"parent",
  data(){
        return {
            data:123
      }
  }
}
</script>

子组件

<template>
    <div class='child'>
    子组件
        {{data}}
  </div>
</template>
<script>
 import Child from './Child'
export default {
    name:"child",
  props:[
        data:{
            type:String
        },
        msg:{
        type:String
      }
  ]
  data(){
        return {
            data:123
      }
  },
  components: {
    Child
  }
}
</script>

​

子父传参

​

父组件

<template>
    <div class="parent">
        父组件
        <Child :btnClick='btnClick'></Child>
    </div>
</template>
<script>
import Child from "./Chile.vue";
export default {
  name: "parent",
  methods: {
    btnClick(msg) {
        console.log(msg);
    }
  },
  components: {
    Child
  }
};
</script>

​

子组件

<template>
    <div class="child">
        <input type="text" v-model="con">
        <button @click="clickBtn">点击</button>
    </div>
</template>
<script>
export default {
    name:"child",
    props:{
        btnClick:{
            type:Function
        },
    },
    data() {
        return {
            con:'1111s'
        }
    },
    methods:{
        clickBtn(){
            // this.$emit('btnClick',this.con)
            this.btnClick(this.con)
        }
    },
}
</script>

· $emit 、v-on
· 父组件中 通过v-on监听子组件的事件，通过回调函数获得参数
· 子组件调用事件，this.$emit(‘父组件传的事件名称’,需要的参数)
·
· 父组件向组件，传递一个函数
· 子组件调用父组件的函数，并传入参数
· 父组件在声明函数的位置，就可以获得对应的参数

父组件调用子组件方法

父组件

<!-- father.vue -->
<template>
    <div>
        <div @click="click">点击父组件</div>
        <child ref="child"></child>
    </div>
</template>

<script>
    import child from "./child";
    export default {
        methods: {
            click() {
                this.$refs.child.$emit('childMethod','发送给方法一的数据') // 方法1:触发监听事件
                this.$refs.child.callMethod() // 方法2:直接调用
            },
        },
        components: {
            child,
        }
    }
</script>

子组件

<!-- child.vue -->
<template>
    <div>子组件</div>
</template>

<script>
    export default {
        mounted() {
            this.monitoring() // 注册监听事件
        },
        methods: {
            monitoring() { // 监听事件
                this.$on('childMethod', (res) => {
                    console.log('方法1:触发监听事件监听成功')
                    console.log(res)
                })
            },
            callMethod() {
                console.log('方法2:直接调用调用成功')
            },
        }
    }
</script>

同级组件通讯
全局匹配 Eventbus
Vue.prototype.$bus = new Vue();
父组件
引入兄弟组件

<template>
    <!-- 测试组件传参页面 -->
    <div class="send">
        send页面
        <Parent></Parent>
        <Brother></Brother>
    </div>
</template>
<script>
import Parent from "@/components/Paternity/Parent";
import Brother from "@/components/Brother/Brother.vue";
export default {
  name: "Send",
  components:{
      Parent,
      Brother
  }
};
</script>
<style lang="scss" scoped>
</style>

子组件
$bus.$emit 发送信息

<template>
    <div class="brother">

    </div>
</template>
<script>
export default {
  name: "brother",
  mounted() {
    this.$nextTick(() => {
      this.$bus.$emit("my", "我是Grandson1");
    });
  }
};
</script>

子组件二
$bus.$on 监听事件

<template>
  <div class="parent">

  </div>
</template>
<script>
import Brother from "../Brother/Brother.vue";
export default {
  mounted() {
    this.$bus.$on("my", data => {
      console.log(data);  //我是Grandson1
    });
  }
};
</script>

· EventBus vue 实例
跨级组件通讯
​

爷爷组件

<template>
    <div class="send">
        send页面
        <Parent :name='name' @click='clickEv'></Parent>
    </div>
</template>
<script>
import Parent from "@/components/Paternity/Parent";
export default {
    name:"Send",
    data() {
        return {
            name:'zyn'
        }
    },
    methods:{
        clickEv(msg){
        console.log(msg)
      }
    }
    components:{
        Parent
    }
}
</script>

父组件

<template>
    <div class="parent">
        父组件
        <Child v-bind='$attrs' v-on='$listeners'></Child>
    </div>
</template>
<script>
import Child from "./Chile.vue";
export default {
  name: "parent",
  components:
    Child
  }
};
</script>

子组件

<template>
    <div class="child">
        {{$attrs.name}} //zyn
      <span @click=''>点击</span>
    </div>
</template>
<script>
export default {
    name:"child",
    data() {
        return {
            con:'1111s'
        }
    },
    mounted() {
         this.$emit('click')
    },
    components:{

    }
}
</script>

· $attrs、$listeners
· $atters 接收参数
· $listeners 接收事件
· provide inject
· provide 是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值
· inject 一个字符串数组，或者是一个对象。属性值可以是一个对象，包含 from 和 default 默认值。
​

爷爷组件

<template>
    <div class="send">
        send页面
        <Parent></Parent>
    </div>
</template>
<script>
import Parent from "@/components/Paternity/Parent";
export default {
  name: "Send",
  data() {
    return {
      msg: "A"
    };
  },
  provide() {
    return {
      message: this.msg
    };
  },
  components:{
      Parent
  }
};
</script>

父组件

<template>
  <div class="parent">
    父组件
    <Child></Child>

  </div>
</template>
<script>
import Child from "./Chile.vue"; //注意引入
export default {
  name: "parent",
  components: { Child },
  inject: ["message"], //接收父组件的值
};
</script>

子组件

<template>
    <div class="child">
        子组件
    </div>
</template>
<script>
export default {
    name:"child",
  inject: ["message"], //接收爷爷组件的值
  created() {
    console.log(this.message); // A
  }
};
</script>

I'm so cute. Please give me money.

• Post author: 彩鹏
• Post link: https://blog.gaocaipeng.com/2020/06/01/lkrn1f/
• Copyright Notice: All articles in this blog are licensed under unless otherwise stated.