Vue 组件的挂载与父子组件的传值实例_vue.js

1：将需要挂载的组件放置在component之中

2：全局挂载在main.js之中

import vue from 'vue'
import app from './app.vue'
import gettime from './component/child/gettime'

//全局注册 整个项目的组件都可以使用
//注册给整个vue 对象
//引入需要注册的全局组件

//在vue类的方法 component里面进行注册
vue.component('v-times',gettime);
vue.component('v-times',{
 template:"<div>{{msg}}</div>",//字符串的标签模板
 data(){ //当前模板的数据
  return {
   msg:"时间"
  }
 }
});
new vue({
 el: '#app',
 render: h => h(app)
})

3：局部挂载至当前父组件之内

<script>
//组件在谁里面使用 在谁里面注册 这种注册方式叫做局部注册
//局部注册只能在父组件里使用
import toptitle from "./component/systemtoptitle";
import leftmenu from "./component/systemleftmenu";
import rightcontent from "./component/systemrightcontent";
//注册组件
//注册完成之后使用组件
export default {
 name: "app",
 components: {
  //注册
  //常规写法键值写法
  "v-toptitle": toptitle,
  "v-leftmenu": leftmenu,
  "v-rightcontent": rightcontent
  //简单写 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 {
   //比如下面的两个信息是后台返回的
   name:"学生信息管理",
   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 {
 //子组件调用父组件的值
 //1 简单写法
 //2 约束数据类型的写法 如果数据类型不一致 会报警告
 //3 如果父组件没有传值 走默认值
 name: "logoinfo",
 //props: ["logo", "sysname"],
 /* props:{
   'logoimg':string,
   'sysname':string
 }, */
 props:{
   'logoimg':{
     type:string,
     default:"src/assets/wanmou.jpg"
   },
   'sysname':string
 },
 data() {
  return {
   //子组件定义props属性接收父组件传递的数据
  };
 }
};
</script>

5：子组件调用父组件的值

子组件：

<template>
 <div id="logoinfo">
  <!--注意此处为:src-->
  <img class="logoimg" :src="logoimg" alt=""/>
  <span class="systemname">{{sysname}}</span>
 </div>
</template>
<script>
export default {
 //子组件调用父组件的值
 //1 简单写法
 //2 约束数据类型的写法 如果数据类型不一致 会报警告
 //3 如果父组件没有传值 走默认值
 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 在子组件里获取整个父组件
  //子组件执行父组件的函数
  //let parent=this.parentinfo;
  //parent.childsend();

  //2 子组件获取父组件 内置方法
  let parentdata=this.$parent;
  console.log(parentdata);
 },
 data() {
  return {
   //子组件定义props属性接收父组件传递的数据
  };
 },
 methods: {
  sendmsg(){
   console.log("子组件函数");
  }
 }
}
</script>

父组件：

<template>
 <div id="toptitle">
  <!--logo子组件是toptitle的子组件  
  //父组件获取子组件的所有内容
  //使用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() {
  //组件挂载完的执行函数
  let logoinfo=this.$refs.logolist;
  //获取到的是整个子组件 父组件里面执行子组件的方法
  logoinfo.sendmsg();
 },
 data(){
  return {
   //比如下面的两个信息是后台返回的
   name:"学生信息管理",
   logo:"src/assets/logo.png"
  }
 },
 methods: {
  childsend(){
   console.log("父组件里面的函数");
  }
 }
}
</script>

补充知识：vue-router中的组件怎么传递参数

第一种方法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>