setup语法糖中父子组件传值

父组件向子组件传值

vue3和vue2相同，都是通过props`传值，父组件中传值写法上也没有什么不同，但是子组件取值上有所不同(当然也支持2.x的写法)。

• 父组件传值(自定义属性="值")

      <voting :results="results" :votingInfo="votingInfos"></voting>
  

• 子组件取值

  • 子组件模板

  <div class="inner-box">
      <div class="vote-desc-box">
          <!-- 头部 -->
          <div class="title-box">
              <span class="left-box">投票</span>
              <span class="right-box" @click="closeFun">关闭</span>
          </div>
          <!-- 投票内容详情 -->
          <div class="cont-box">
              <p class="vote-title">{{ votingInfos.voteTitle }}</p>
              <p class="desc">
                  {{ votingInfos.voteDesc }}
              </p>
              <!-- 投票选项-单选 -->
              <div class="choice-list" v-if="!votingInfos.delivery">
                 
              </div>
              <!-- 投票选项-多选选 -->
              <div class="choice-list" v-if="votingInfos.delivery">
                  
              </div>
          </div>
          <!-- 投票相关提示 -->
          <div class="vote-tip" v-if="result.userId">您已经进行了投票，无需再次投票，谢谢！</div>
          <div class="finish-vote" v-if="!votingInfos.finished">
              投票将于今天 {{ votingInfos.endTime }} 结束，请及时进行投票哟~
          </div>
          <div class="finish-vote" v-if="votingInfos.finished">
              投票已经结束，谢谢参与！
          </div>
          <!-- 提交投票 -->
          <div class="launch-box" v-if="!result.userId && !votingInfos.finished">
              <span @click="launchVote">提交投票</span>
          </div>
      </div>
  </div>
  
  

  • 在普通的script标签(不含setup语法糖)中，子组件通过props接受，然后在setup(props，emit)第一个参数中拿到props实例，props.自定义属性获取对应的值。

  <script>
  import { defineComponent, ref } from "vue"
  export default defineComponent({
    name: "father",
    setup(props, context) {
      // context作用是获取上下文对象，
      // 如果setup写法为setup(props, { emit })的方式的话，下面的context可以省略
      console.log(props)
    },
  })
  </script>
  

  • 在setup语法糖写法中获取props值

  <script setup lang="ts">
    import { computed } from '@vue/runtime-core';
    const props = defineProps(['votingInfo', 'results']);
    let choice = ref(0); //单选结果
    let choiceArr = ref([0]);//多选结果
    // 获取投票的结果(是否投票，是否过期等)
    const result = computed(() => {
        if (props.results.value) {
            choice.value = props.results.value.choice || 0
            choiceArr.value = props.results.value.choiceArr || []
        }
        return props.results.value || {}
    })
  </script>
  

子组件向父组件传值

vue3和vue2相同，都是通过emit传值，但是在vue3的写法中，我们知道里面this和2.x中不同，打印是会发现其是undefined。vue3针对于setup语法糖中写法和非语法糖写法中也有所不同。

• 父组件中html展示

  <voting @submitResult="submitResult"></voting>
  

• 子组件中html展示

   <span @click="launchVote">提交投票</span>
  

• 非setup语法糖(<script lang="ts">)写法

  <script lang="ts">
  import { defineComponent } from "vue"
  export default defineComponent({
    name: "children",
    setup(props, context) {
      // context作用是获取上下文对象，
      // 如果setup写法为setup(props, { emit })的方式的话，下面的context可以省略
      const launchVote = () => {
          if (Number(votingInfos.value.timeStemp) < new Date().getTime()) {
              ElMessage.error('投票活动时间已过期，停止投票！')
              return false;
          }
          emit('submitResult', {
              choice: choice.value,
              choiceArr: choiceArr.value,
              ...votingInfos.value
          })
      };
      return {
        launchVote,
      }
    },
  })
  </script>
  

• setup语法糖(<script lang="ts" setup>)写法

  <script lang="ts"  setup>
  const emit = defineEmits(['close', 'submitResult']);
  // 发起投票
  const launchVote = () => {
      if (Number(votingInfos.value.timeStemp) < new Date().getTime()) {
          ElMessage.error('投票活动时间已过期，停止投票！')
          return false;
      }
      emit('submitResult', {
          choice: choice.value,
          choiceArr: choiceArr.value,
          ...votingInfos.value
      })
  }
  </script>