vue组件通信传参方式

vue组件传参包括父组件向组件传参，子组件向父组件传参，组件之间传参这三种

一、props和$emit

子组件向父组件传参

子组件向父组件传参，通过定义参数的方式传递参数
1.在组件中动态绑定（如果只想传递一个静态的prop ，可以不绑定，如下）要传递的数据
2.在子组件中使用 props 选项去接收来自父组件传递过来的数据
完整代码如下

//父组件
<child :msg= "'这里是你要传给子组件的数据'" class="child"> 
//msg为自定义属性，动态像子组件传递数据
//子组件
<script>
    let child = {
   
      template: `<div>
      <p>下面是来自爸爸的信息:</p>
      <p>{
    { msg }}</p>
    </div>`,
      props: ['msg'] //通过props属性接收父组件传递的参数
    }
    let father = new Vue({
   
      el:'#father',
      components: {
    child }, // 注册子组件
      data: {
   
        message: 'message from father'
      }
    })
  </script>

关于props

1.可以使用v­-bind动态绑定父组件来的内容
2.在组件中使用props来从父组件接收参数，注意，在props中定义的属性，都可以在子组件中直接使用
3.props来自父级，而组件中data return的数据就是组件自己的数据，两种情况作用域就是组件本身，可以在template，computed，methods中直接使用（子组件不能直接修改props中的值）
4.props的值有两种，一种是字符串数组，一种是对象
对于数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态（尽可能将父子组件解耦，避免子组件无意中修改了父组件的状态）

子组件向父组件传参

自定义事件

子组件用 $emit()来触发事件，父组件用v-on来监听子组件的事件第一步：自定义事件第二步：在子组件中用$emit触发事件。第一个参数是事件名，后边的参数是要传递的数据
第三步：在自定义事件中用一个参数来接收

在父组件中自定义事件

  <div id="app">
      <h4>我是父组件 </h4>
      <p>目前积分是： {
  { data }}</p>
      <hr>
      <son-component @update-data="update" > </son-component>
    <!-- v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以推荐始终使用 kebab-case 的事件名 -->
   </div>

在子组件中用$emit触发事件，并传入一个值

 add: function () {
   
             this.</