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

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

2：全局挂载在main.js之中

1. import Vue from 'vue'
2. import App from './App.vue'
3. import getTime from './component/child/getTime'
4.  
5. //全局注册 整个项目的组件都可以使用
6. //注册给整个vue 对象
7. //引入需要注册的全局组件
8.  
9. //在vue类的方法 component里面进行注册
10. Vue.component('v-times',getTime);
11. Vue.component('v-times',{
12. template:"<div>{{msg}}</div>",//字符串的标签模板
13. data(){ //当前模板的数据
14. return {
15. msg:"时间"
16. }
17. }
18. });
19. new Vue({
20. el: '#app',
21. render: h => h(App)
22. })

3：局部挂载至当前父组件之内

1. <script>
2. //组件在谁里面使用 在谁里面注册 这种注册方式叫做局部注册
3. //局部注册只能在父组件里使用
4. import topTitle from "./component/systemtoptitle";
5. import leftMenu from "./component/systemleftmenu";
6. import rightContent from "./component/systemrightcontent";
7. //注册组件
8. //注册完成之后使用组件
9. export default {
10. name: "app",
11. components: {
12. //注册
13. //常规写法键值写法
14. "v-toptitle": topTitle,
15. "v-leftmenu": leftMenu,
16. "v-rightcontent": rightContent
17. //简单写 topTitle leftMenu rightContent
18. },
19. data() {
20. return {};
21. }
22. };
23. </script>

4：父组件传值给子组件

父组件：

1. <template>
2. <div id="toptitle">
3. <!--logo子组件是toptitle的子组件-->
4. <!--子组件接收值-->
5. <v-logo :sysname="name"></v-logo>
6. </div>
7. </template>
8. <script>
9. import logo from './child/logo'
10. export default{
11. name:"toptitle ",
12. components:{
13. 'v-logo':logo
14. },
15. data(){
16. return {
17. //比如下面的两个信息是后台返回的
18. name:"学生信息管理",
19. logo:"src/assets/logo.png"
20. }
21. }
22. }
23. </script>

子组件：

1. <template>
2. <div id="logoinfo">
3. <!--注意此处为:src-->
4. <img class="logoimg" :src="logoimg" alt=""/>
5. <span class="systemname">{{sysname}}</span>
6. </div>
7. </template>
8. <script>
9. export default {
10. //子组件调用父组件的值
11. //1 简单写法
12. //2 约束数据类型的写法 如果数据类型不一致 会报警告
13. //3 如果父组件没有传值 走默认值
14. name: "logoinfo",
15. //props: ["logo", "sysname"],
16. /* props:{
17. 'logoimg':String,
18. 'sysname':String
19. }, */
20. props:{
21. 'logoimg':{
22. type:String,
23. default:"src/assets/wanmou.jpg"
24. },
25. 'sysname':String
26. },
27. data() {
28. return {
29. //子组件定义props属性接收父组件传递的数据
30. };
31. }
32. };
33. </script>

5：子组件调用父组件的值

子组件：

1. <template>
2. <div id="logoinfo">
3. <!--注意此处为:src-->
4. <img class="logoimg" :src="logoimg" alt=""/>
5. <span class="systemname">{{sysname}}</span>
6. </div>
7. </template>
8. <script>
9. export default {
10. //子组件调用父组件的值
11. //1 简单写法
12. //2 约束数据类型的写法 如果数据类型不一致 会报警告
13. //3 如果父组件没有传值 走默认值
14. name: "logoinfo",
15. //props: ["logo", "sysname"],
16. /* props:{
17. 'logoimg':String,
18. 'sysname':String
19. }, */
20. props:{
21. logoimg:{
22. type:String,
23. default:"src/assets/wanmou.jpg"
24. },
25. sysname:String,
26. parentinfo:Object
27. },
28. mounted() {
29. //1 在子组件里获取整个父组件
30. //子组件执行父组件的函数
31. //let parent=this.parentinfo;
32. //parent.childsend();
33.  
34. //2 子组件获取父组件 内置方法
35. let parentdata=this.$parent;
36. console.log(parentdata);
37. },
38. data() {
39. return {
40. //子组件定义props属性接收父组件传递的数据
41. };
42. },
43. methods: {
44. sendmsg(){
45. console.log("子组件函数");
46. }
47. }
48. }
49. </script>

父组件：

1. <template>
2. <div id="toptitle">
3. <!--logo子组件是toptitle的子组件
4. //父组件获取子组件的所有内容
5. //使用ref获取虚拟的dom来获取子组件
6. -->
7. <!--子组件接收值-->
8. <v-logo :parentinfo="this" ref="logolist" :sysname="name"></v-logo>
9. </div>
10. </template>
11. <script>
12. import logo from './child/logo'
13. export default{
14. name:"toptitle",
15. components:{
16. 'v-logo':logo
17. },
18. mounted() {
19. //组件挂载完的执行函数
20. let logoinfo=this.$refs.logolist;
21. //获取到的是整个子组件 父组件里面执行子组件的方法
22. logoinfo.sendmsg();
23. },
24. data(){
25. return {
26. //比如下面的两个信息是后台返回的
27. name:"学生信息管理",
28. logo:"src/assets/logo.png"
29. }
30. },
31. methods: {
32. childsend(){
33. console.log("父组件里面的函数");
34. }
35. }
36. }
37. </script>

补充知识：vue-router中的组件怎么传递参数

第一种方法params

1. {
2. path: '/user/:userid',
3. component: User
4. },

1. <template>
2. <div>
3. <h2>{{userid}}</h2> //
4. <h3>{{this.$route.params}}</h3>
5. </div>
6. </template>

1. <router-link :to='/user/+userid' tag="button">用户</router-link>
2. <router-view></router-view>
3.  
4. export default {
5. name: 'App',
6. data() {
7. return {
8. userid: 'lisi'
9. }
10. }
11. }

第二种 query

1. {
2. path: '/profile',
3. component: Profile
4. }

1. <template>
2. <div>
3. <h2>我是Profile</h2>
4. <h3>{{this.$route.query}}</h3>
5. </div>
6. </template>

1. <router-link :to="{path: '/profile', query: {
2. name: 'hylls',
3. age: 20,
4. height: 1.77
5. }}" tag="button">profile</router-link>
6. <router-view></router-view>

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

原文链接：https://blog.csdn.net/qq_42455145/article/details/106459635