Vue 组件的挂载与父子组件的传值

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>