Vue 組件的掛載與父子組件的傳值實(shí)例

更新時(shí)間：2020年09月02日 15:41:44 作者：愛學(xué)習(xí)的小發(fā)發(fā)

這篇文章主要介紹了Vue 組件的掛載與父子組件的傳值實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

1：將需要掛載的組件放置在component之中

2：全局掛載在main.js之中

import Vue from 'vue'
import App from './App.vue'
import getTime from './component/child/getTime'

//全局注冊(cè) 整個(gè)項(xiàng)目的組件都可以使用
//注冊(cè)給整個(gè)vue 對(duì)象
//引入需要注冊(cè)的全局組件

//在vue類的方法 component里面進(jìn)行注冊(cè)
Vue.component('v-times',getTime);
Vue.component('v-times',{
 template:"<div>{{msg}}</div>",//字符串的標(biāo)簽?zāi)０?
 data(){ //當(dāng)前模板的數(shù)據(jù)
  return {
   msg:"時(shí)間"
  }
 }
});
new Vue({
 el: '#app',
 render: h => h(App)
})

3：局部掛載至當(dāng)前父組件之內(nèi)

<script>
//組件在誰里面使用 在誰里面注冊(cè) 這種注冊(cè)方式叫做局部注冊(cè)
//局部注冊(cè)只能在父組件里使用
import topTitle from "./component/systemtoptitle";
import leftMenu from "./component/systemleftmenu";
import rightContent from "./component/systemrightcontent";
//注冊(cè)組件
//注冊(cè)完成之后使用組件
export default {
 name: "app",
 components: {
  //注冊(cè)
  //常規(guī)寫法鍵值寫法
  "v-toptitle": topTitle,
  "v-leftmenu": leftMenu,
  "v-rightcontent": rightContent
  //簡(jiǎn)單寫 topTitle leftMenu rightContent
 },
 data() {
  return {};
 }
};
</script>

4：父組件傳值給子組件

父組件：

<template>
 <div id="toptitle">
  <!--logo子組件是toptitle的子組件-->
  <!--子組件接收值-->
  <v-logo :sysname="name"></v-logo>
 </div>
</template>
<script>
import logo from './child/logo'
export default{
 name:"toptitle ",
 components:{
  'v-logo':logo
 },
 data(){
  return {
   //比如下面的兩個(gè)信息是后臺(tái)返回的
   name:"學(xué)生信息管理",
   logo:"src/assets/logo.png"
  }
 }
}
</script>

子組件：

<template>
 <div id="logoinfo">
  <!--注意此處為:src-->
  <img class="logoimg" :src="logoimg" alt=""/>
  <span class="systemname">{{sysname}}</span>
 </div>
</template>
<script>
export default {
 //子組件調(diào)用父組件的值
 //1 簡(jiǎn)單寫法
 //2 約束數(shù)據(jù)類型的寫法 如果數(shù)據(jù)類型不一致 會(huì)報(bào)警告
 //3 如果父組件沒有傳值 走默認(rèn)值
 name: "logoinfo",
 //props: ["logo", "sysname"],
 /* props:{
   'logoimg':String,
   'sysname':String
 }, */
 props:{
   'logoimg':{
     type:String,
     default:"src/assets/wanmou.jpg"
   },
   'sysname':String
 },
 data() {
  return {
   //子組件定義props屬性接收父組件傳遞的數(shù)據(jù)
  };
 }
};
</script>

5：子組件調(diào)用父組件的值

子組件：

<template>
 <div id="logoinfo">
  <!--注意此處為:src-->
  <img class="logoimg" :src="logoimg" alt=""/>
  <span class="systemname">{{sysname}}</span>
 </div>
</template>
<script>
export default {
 //子組件調(diào)用父組件的值
 //1 簡(jiǎn)單寫法
 //2 約束數(shù)據(jù)類型的寫法 如果數(shù)據(jù)類型不一致 會(huì)報(bào)警告
 //3 如果父組件沒有傳值 走默認(rèn)值
 name: "logoinfo",
 //props: ["logo", "sysname"],
 /* props:{
   'logoimg':String,
   'sysname':String
 }, */
 props:{
   logoimg:{
     type:String,
     default:"src/assets/wanmou.jpg"
   },
   sysname:String,
   parentinfo:Object
 },
 mounted() {
  //1 在子組件里獲取整個(gè)父組件
  //子組件執(zhí)行父組件的函數(shù)
  //let parent=this.parentinfo;
  //parent.childsend();

  //2 子組件獲取父組件 內(nèi)置方法
  let parentdata=this.$parent;
  console.log(parentdata);
 },
 data() {
  return {
   //子組件定義props屬性接收父組件傳遞的數(shù)據(jù)
  };
 },
 methods: {
  sendmsg(){
   console.log("子組件函數(shù)");
  }
 }
}
</script>

父組件：

<template>
 <div id="toptitle">
  <!--logo子組件是toptitle的子組件  
  //父組件獲取子組件的所有內(nèi)容
  //使用ref獲取虛擬的dom來獲取子組件
  -->
  <!--子組件接收值-->
  <v-logo :parentinfo="this" ref="logolist" :sysname="name"></v-logo>
 </div>
</template>
<script>
import logo from './child/logo'
export default{
 name:"toptitle",
 components:{
  'v-logo':logo
 },
 mounted() {
  //組件掛載完的執(zhí)行函數(shù)
  let logoinfo=this.$refs.logolist;
  //獲取到的是整個(gè)子組件 父組件里面執(zhí)行子組件的方法
  logoinfo.sendmsg();
 },
 data(){
  return {
   //比如下面的兩個(gè)信息是后臺(tái)返回的
   name:"學(xué)生信息管理",
   logo:"src/assets/logo.png"
  }
 },
 methods: {
  childsend(){
   console.log("父組件里面的函數(shù)");
  }
 }
}
</script>

補(bǔ)充知識(shí)：vue-router中的組件怎么傳遞參數(shù)

第一種方法params

 {
   path: '/user/:userid',
   component: User
  },

<template>
<div>
<h2>{{userid}}</h2> // 
<h3>{{this.$route.params}}</h3>
</div>
</template>

<router-link :to='/user/+userid' tag="button">用戶</router-link>
<router-view></router-view>

export default {
 name: 'App',
 data() {
  return {
   userid: 'lisi'
  }
 }
}

第二種 query

 {
   path: '/profile',
   component: Profile
  }

<template>
<div>
<h2>我是Profile</h2>
<h3>{{this.$route.query}}</h3>
</div>
</template>

<router-link :to="{path: '/profile', query: {
   name: 'hylls',
   age: 20,
   height: 1.77
  }}" tag="button">profile</router-link>
  <router-view></router-view>