vue组件与组件之间的传值

1. 父子组件间的传值方式

• 父子组件间的传值可以使用 v-model进行数据绑定。

• 父组件向子组件传值，使用 props 的方式进行传递，子组件使用props接收父组件传递过来的值。代码如下：

      <!--父组件-->
      <template>
          <div>
              <!--此为父组件中引用的一个子组件-->
              <Phone
                <!--在父组件中给这个子组件去赋值，否则子组件接收到的值会是undefined-->
                  :headName="headName"
              >
              </Phone>
          </div>
      </template>
      <script>
          import Phone from "@/components/Phone/Phone";
          export default {
              name: "Home",
              components: {Phone,},
              props: {
                  data: {
                      consultList: [],
                  }
              },
              data() {
                  return ({
                      headName:'首页'
                  })
              },
          }
      </script>
      <!--子组件-->
      <script>
          import draggable from 'vuedraggable'
          export default {
              name: "Phone",
              components: {draggable},
              <!--在子组件中接收父组件传递过来的值-->
              props: {
                  headName:String,
              },
          }
      </script>
      
  

• 子组件向父组件传值，子组件向父组件传递值或者data数据使用 $emit ,根据我自己的理解,使用 $emit 传值需要有事件来触发,代码如下：

  <!--父组件-->
     <template>
         ...
         <div class="tabs-nav-content">
            <ComponentCard
              <!--接收子组件传递过来的值-->
              @clicks="$emit('click',component)"
            ></ComponentCard>
          </div>
         ...
     </template>
  <!--子组件-->
      <template>
        <div class="card" 
             <!--子组件向父组件传值-->
             @click="$emit('clicks')"
        >
          <i :class="icon"></i>
          <h5 class="name">{{name}}</h5>
        </div>
      </template>
      
      <script>
          export default {
              name: "ComponentCard",
              props:{
                  icon:String,
                  name:String,
              }
          }
      </script>
  

• 子组件与子组件之间不可传值，但是可以将要传的值传给父组件，在通过父组件复值给子组件。