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


Posted in Javascript onSeptember 02, 2020

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

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

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'
  }
 }
}

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

第二种 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>

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

以上这篇Vue 组件的挂载与父子组件的传值实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 快捷键设置实现代码
Mar 13 Javascript
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 Javascript
js动态调用css属性的小规律及实例说明
Dec 28 Javascript
express的中间件cookieParser详解
Dec 04 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
轻松理解JavaScript之AJAX
Mar 15 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
May 25 Javascript
Vue如何从1.0迁移到2.0
Oct 19 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
Aug 28 Javascript
一起写一个即插即用的Vue Loading插件实现
Oct 31 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
Dec 23 Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 #Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 #Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 #Javascript
vue或react项目生产环境去掉console.log的操作
Sep 02 #Javascript
JS继承实现方法及优缺点详解
Sep 02 #Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 #Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 02 #Javascript
You might like
解析crontab php自动运行的方法
2013/06/24 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
jQuery获取父元素及父节点的方法小结
2016/04/14 Javascript
nodejs简单实现操作arduino
2016/09/25 NodeJs
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
2018/03/08 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
2020/08/07 Javascript
vue-drawer-layout实现手势滑出菜单栏
2020/11/19 Vue.js
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
Python找出9个连续的空闲端口
2016/02/01 Python
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
Python3中在Anaconda环境下安装basemap包
2018/10/21 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
Python matplotlib 绘制双Y轴曲线图的示例代码
2020/06/12 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
解决python 输出到csv 出现多空行的情况
2021/03/24 Python
应届生护士求职信
2013/11/01 职场文书
技术副厂长岗位职责
2013/12/26 职场文书
管理心得体会
2013/12/28 职场文书
住房公积金接收函
2014/01/09 职场文书
军训感想500字
2014/02/20 职场文书
2014年培训工作总结范文
2014/11/27 职场文书
经典导游欢迎词
2015/01/26 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android
JavaScript组合继承详解
2021/11/07 Javascript
python数字图像处理之对比度与亮度调整示例
2022/06/28 Python