Vue 组件的挂载与父子组件的传值实例
网络编程 2021-07-04 14:06www.168986.cn编程入门
这篇文章主要介绍了Vue 组件的挂载与父子组件的传值实例,具有很好的参考价值,希望对大家有所帮助。一起跟随长沙网络推广过来看看吧
1:将需要挂载的组件放置在ponent之中
2:全局挂载在main.js之中
import Vue from 'vue' import App from './App.vue' import getTime from './ponent/child/getTime' //全局注册 整个项目的组件都可以使用 //注册给整个vue 对象 //引入需要注册的全局组件 //在vue类的方法 ponent里面进行注册 Vue.ponent('v-times',getTime); Vue.ponent('v-times',{ template:"<div>{{msg}}</div>",//字符串的标签模板 data(){ //当前模板的数据 return { msg:"时间" } } }); new Vue({ el: '#app', render: h => h(App) })
3:局部挂载至当前父组件之内
<script> //组件在谁里面使用 在谁里面注册 这种注册方式叫做局部注册 //局部注册只能在父组件里使用 import Title from "./ponent/systemtitle"; import leftMenu from "./ponent/systemleftmenu"; import rightContent from "./ponent/systemrightcontent"; //注册组件 //注册完成之后使用组件 export default { name: "app", ponents: { //注册 //常规写法键值写法 "v-title": Title, "v-leftmenu": leftMenu, "v-rightcontent": rightContent //简单写 Title leftMenu rightContent }, data() { return {}; } }; </script>
4:父组件传值给子组件
父组件:
<template> <div id="title"> <!--logo子组件是title的子组件--> <!--子组件接收值--> <v-logo :sysname="name"></v-logo> </div> </template> <script> import logo from './child/logo' export default{ name:"title ", ponents:{ 'v-logo':logo }, data(){ return { //比如狼蚁网站SEO优化的两个信息是后台返回的 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="title"> <!--logo子组件是title的子组件 //父组件获取子组件的所有内容 //使用ref获取虚拟的dom来获取子组件 --> <!--子组件接收值--> <v-logo :parentinfo="this" ref="logolist" :sysname="name"></v-logo> </div> </template> <script> import logo from './child/logo' export default{ name:"title", ponents:{ 'v-logo':logo }, mounted() { //组件挂载完的执行函数 let logoinfo=this.$refs.logolist; //获取到的是整个子组件 父组件里面执行子组件的方法 logoinfo.sendmsg(); }, data(){ return { //比如狼蚁网站SEO优化的两个信息是后台返回的 name:"学生信息管理", logo:"src/assets/logo.png" } }, methods: { childsend(){ console.log("父组件里面的函数"); } } } </script>
补充知识:vue-router中的组件怎么传递参数
第一种方法params
{ path: '/user/:userid', ponent: 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', ponent: 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 组件的挂载与父子组件的传值实例就是长沙网络推广分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程