【Vue】组件传参-Toy模板网

这篇具有很好参考价值的文章主要介绍了【Vue】组件传参。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

父传子

关键字
:参数
defineProps

父组件代码

<script setup>
  import {ref} from 'vue'
  import Header from"./components/Header.vue"
  import Navigator from"./components/Navigator.vue"
  import Content from"./components/Content.vue"  

  let message =ref('parent data!')
  let title=ref(42)
  function changeMessage(){
    message.value='修改数据'
    title.value++
  }
</script>

<template>
  <div>
    {{ message }}
    <button @click="changeMessage"></button>
    <Header class="header"></Header>
    <Navigator class="navigator"></Navigator>
    <Content class="content" :message="message" :title="title"></Content> 
    
  </div>
</template> 

<style scoped>
  .header{
    height: 80px;
    border: 1px solid red;
  }
  .navigator{
    width: 15%;
    height: 800px;
    display: inline-block;
    border: 1px blue solid;
    float: left;
  }
  .content{
      width: 83%;
      height: 800px;
      display: inline-block;
      border: 1px goldenrod solid;
      float: right;
    }
</style>

子组件代码

<script setup>
  import {ref,isRef,defineProps} from 'vue'
  defineProps({
    message:String,
    title:Number
  })
</script>

<template>
  <div>
    Content：展示主要内容<br>
    {{ message }}<br>
    {{ title }}
  </div>
</template>

<style scoped>
</style>

字传父

关键字
const x=(参数)=>{赋值}
let emits=defineEmits([‘n’])
在别处，emits(‘n’,一个值)，就可以给父组件传参了文章来源地址https://www.toymoban.com/news/detail-813930.html

父组件

<script setup>
  import {ref} from 'vue'
  import Header from"./components/Header.vue"
  import Navigator from"./components/Navigator.vue"
  import Content from"./components/Content.vue"  
  
  let n=ref(0)
  const rn=(data)=>{
    n.value=data
  }
</script>

<template>
  <div>
    {{ n }}
    <Header class="header" @n="rn"></Header>
    <Navigator class="navigator"></Navigator>
    <Content class="content" ></Content> 
    
  </div>
</template> 

<style scoped>
  .header{
    height: 80px;
    border: 1px solid red;
  }
  .navigator{
    width: 15%;
    height: 800px;
    display: inline-block;
    border: 1px blue solid;
    float: left;
  }
  .content{
      width: 83%;
      height: 800px;
      display: inline-block;
      border: 1px goldenrod solid;
      float: right;
    }
</style>

子组件

<script setup>
  import {ref,defineEmits} from 'vue'
  let emites=defineEmits(['n'])

  let data=ref(1);
  function sendMsgToParent(){
    data.value++
    emites('n',data.value)
  }
</script>

<template>
  <div>
    <button @click="sendMsgToParent">+</button>
  </div>
</template>

<style scoped>
</style>