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 相关文章推荐
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
Apr 20 Javascript
javascript利用控件对windows的操作实现原理与应用
Dec 23 Javascript
jQuery setTimeout()函数使用方法
Apr 07 Javascript
JS网页播放声音实现代码兼容各种浏览器
Sep 22 Javascript
js 删除数组的几种方法小结
Feb 21 Javascript
无刷新上传文件并返回自定义值
Jun 11 Javascript
javascript中对变量类型的判断方法
Aug 09 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
May 03 Javascript
Vue组件化通讯的实例代码
Jun 23 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 Javascript
JS原型继承四步曲及原型继承图一览
Nov 28 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
Sep 27 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
不重新编译PHP为php增加openssl模块的方法
2011/06/14 PHP
PHP Class&amp;Object -- PHP 自排序二叉树的深入解析
2013/06/25 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
浅谈javascript中的作用域
2012/04/07 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
JQuery显示、隐藏div的几种方法简明总结
2015/04/16 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
easyui-datagrid特殊字符不能显示的处理方法
2017/04/12 Javascript
让网站自动生成章节目录索引的多个js代码
2018/01/07 Javascript
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
微信小程序调用后台service教程详解
2020/11/06 Javascript
Python中标准模块importlib详解
2017/04/16 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
用python打印1~20的整数实例讲解
2019/07/01 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
django自定义模板标签过程解析
2019/12/14 Python
Matplotlib scatter绘制散点图的方法实现
2020/01/02 Python
新版Pycharm中Matplotlib不会弹出独立的显示窗口的问题
2020/06/02 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
四年级语文教学反思
2014/02/05 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
民主生活会发言材料
2014/10/20 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
社区服务理念口号
2015/12/25 职场文书
2016年幼儿园庆六一开幕词
2016/03/04 职场文书
python 管理系统实现mysql交互的示例代码
2021/12/06 Python
vue判断按钮是否可以点击
2022/04/09 Vue.js
python实现手机推送 代码也就10行左右
2022/04/12 Python