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 miscellanea -display data real time, using window.status
Jan 09 Javascript
dojo学习第一天 Tab选项卡 实现
Aug 28 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
JavaScript语言对Unicode字符集的支持详解
Dec 30 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
Nov 04 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
Angular中的$watch方法详解
Sep 18 Javascript
vue中的watch监听数据变化及watch中各属性的详解
Sep 11 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 Javascript
如何在 Vue 中使用 JSX
Feb 14 Vue.js
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
php cli 方式 在crotab中运行解决
2010/02/08 PHP
PHP 采集程序原理分析篇
2010/03/05 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
php检测文件编码的方法示例
2014/04/25 PHP
php+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
php pthreads多线程的安装与使用
2016/01/19 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
基于javascript实现的购物商城商品倒计时实例
2016/12/11 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
2017/02/10 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
2018/01/04 Javascript
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
vue实现鼠标经过动画
2019/10/16 Javascript
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
python 快速排序代码
2009/11/23 Python
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
python实现教务管理系统
2018/03/12 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
Python如何绘制日历图和热力图
2020/08/07 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
车工岗位职责
2013/11/26 职场文书
出国留学经济担保书
2014/04/01 职场文书
广告学专业求职信
2014/06/19 职场文书
2014年教师节活动总结
2014/08/29 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
公务员年度考核评语
2014/12/31 职场文书
老公保证书
2015/01/17 职场文书
酒店厨房管理制度
2015/08/06 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
python实现三次密码验证的示例
2021/04/29 Python
pytorch model.cuda()花费时间很长的解决
2021/06/01 Python
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA