父组件向子组件传值

765 阅读1分钟

1. 父组件向子组件传值

1.1 先在子组件里面定义好要传递未知,用变量定义好名称,然后将要传递的数据类型定义好:

子组件:

代码如下:

<template>
 <div class="navapp">
   <div class="navbar">
     <div class="navleft" @click="$router.go(-1)">
       <img src="../assets/images/public/back.png" alt="" v-if="srcimg == true" /> <span>{{ navback }}</span>
     </div>
     <div class="navcenter">{{ navcenter }}</div>
     <div class="navright">{{ navright }}</div>
   </div>
 </div>
</template>

<script>
export default {
 name: "NavBar",
 props: {
   srcimg: Boolean,
   navback:String,
   navcenter:String,
   navright:String
 },
};
</script>

1.2 首先先将子组件通过improt给导入到父组件页面里,然后,在components中注册一下,最后就能直接使用,传值给子组件了。

父组件:

代码如下:

<template>
 <div class="home">
   <NavBar
     :srcimg="true"
     :navback="back"
     navcenter="银选"
     navright="右边"
   ></NavBar>
 </div>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
export default {
 name: "Home",
 components: {
   NavBar,
 },
 data() {
   return {
     back:'返回'
   };
 }
};
</script>