荐 Vue的props和$emit总结

 

总结：

被封装好的组件，才能被调用                               组件如何封装，请查看文档 

组件封装好后，要进行全局调用，在components文件夹下创建index.js文件，用 Vue.component() 进行全局调用（如下图）

 

注意：全局调用，是component。局部调用，是components

 

如果组件引用了一个组件，那么该组件就叫父组件。被引用的这个组件就叫子组件 

下文中的父组件调用子组件，在父组件进行三个操作步骤：

1、引入子组件import Login from '../components/Login/Login'；

2、 局部调用（components）   

  components: {

    Login

  },

3、<template>内插入     <Login />

 

 

1、props                                                            【源代码在最后面】

父组件给子组件传值，子组件里的props接受传值（该值可以是数组，也可以是对象） 【下图中的五个变量最好写同一个，不出错】

父组件里调用封装好的子组件<Login :msg="msg" /> 中绑定的属性 :msg（可以动态绑定，也可以静态绑定），这里是动态绑定。其父组件调用<login>组件里绑定的:msg  与它组件里的 props 对象里的msg保持一致  

我们可以加入v-model进行数据绑定

 

2、$emit                                            【源代码在最后面】                         

this.$emit('自定义事件名字'，'要传给父组件的内容')，在父组件中接收自定义事件

  <button @click="showMessage">子组件给父组件传参</button>

子组件内有一个触发函数（<button>元素里的 @click="showMessage"），当这个子组件加载到父组件上时，点击这个按钮，就会触发 showMessage()函数，这个函数执行this.$emit('showMsg',data)，抛出一个data对象，被父组件接收。

 

很明显地看出，父组件中的<Login :msg='msg' @showMsg='showMsg' /> ，showMsg没有传参数

而methods方法体内，，showMsg()是有接收参数的。

 

 

橙色部分事件名保持一致，这个showMsg是连接父子通信的桥梁

 

 

下文：

props:父组件向子组件传值，先在父组件中动态绑定要传的值，（注意：如果传的值是字符串，可以不用加冒号动态绑定），然后在子组件中用props接受传过来的值

代码：

子组件

<template>

  <div>

  <h1>{{msg}}</h1>

  </div>

</template>

 

<script>

export default {

  props: {

    msg: {

      type: String,

      default: ''

    }

  }

}

</script>

 

 

父组件：

<template>

  <div>

    <Login :msg="msg" />

    <input type="text" v-model="msg">

    {{msg}}

  </div>

</template>

 

<script>

import Login from '../components/Login/Login'

export default {

  components: {

    Login

  },

  data() {

    return {

      msg: 'this is a World'

    }

  }

}

</script>

 

 

$emit:子组件向父组件传值,通过事件触发，先在子组件中注册点击事件，在事件中用 this.$emit('自定义事件名字'，'要传给父组件的内容')，在父组件中接收自定义事件

父组件：

<template>

  <div>

  <Login :msg='msg' @showMsg='showMsg' />

  </div>

</template>

 

<script>

import Login from '../components/Login/Login'

  export default{

    components: {

      Login

    },

    data(){

      return {

        msg:'This is a World'

      }

    },

    methods: {

      showMsg(data) {

        this.msg = data.num

        console.log(data.num)

      }

    }

  }

</script>

 

子组件：

<template>

  <div class="img-box">

    <div class="img-box1">

      <div>

        <button @click="showMessage('参数')">子组件给父组件传参</button>

        <h1>{{msg}}</h1>

      </div>

    </div>

  </div>

</template>

 

<script>

export default {

  props: {

    msg: {

      type: String,

      default: ''

    }

  },

  methods: {

    showMessage(val){

      const data = {

        num: val

      }

      this.$emit('showMsg',data)

    }

}

}

</script>

 

 

子组件也可以这样写：

<template>

  <div class="img-box">

    <div class="img-box1">

      <div>

        <img src="../../assets/logo.png" alt="Logo-pic" />

        <button @click="showMessage">子组件给父组件传参</button>

        <h1>{{msg}}</h1>

      </div>

    </div>

  </div>

</template>

 

<script>

export default {

  props: {

    msg: {

      type: String,

      default: ''

    }

  },

  methods: {

    showMessage(){

      const val = '参数'

      const data = {

        num: val

      }

      this.$emit('showMsg',data)

    }

}

}

</script>

 

 

 

 

 

 

本文地址：https://blog.csdn.net/weixin_45593968/article/details/107380910