Vue 教程(十七)父子组件

最新推荐文章于 2024-02-29 11:55:55 发布
最新推荐文章于 2024-02-29 11:55:55 发布
阅读量150 收藏
点赞数
分类专栏： # Vue教程
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/yuan_xw/article/details/119512050
版权

Vue 教程(十七)父子组件

父子组件

  1. 父组件下挂载一个子组件，子组件下还可以有子子组件。

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父子组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <parent-component></parent-component>
    </div>
    <script>
        const childComponent = Vue.extend({
            template: `
                <div>
                    <h3>计算机系列丛书</h3>
                    <p>计算机|网络|人工智能</p>
                </div>
            `
        });
        const parentComponent = Vue.extend({
            template: `
                <div>
                    <h3>图书分类</h3>
                    <p>电子书|杂志期刊|原版书</p>
                    <child-component></child-component>
                </div>
            `,
            components: {
                'child-component':childComponent
            }

        })
        const app = new Vue({
            el:"#app",
            components: {
                'parent-component':parentComponent
            }

        })
    </script>
</body>
</html>

在这里插入图片描述

    – 以上为《Vue 教程(十七)父子组件》，如有不当之处请指出，我后续逐步完善更正，大家共同提高。谢谢大家对我的关注。

——厚积薄发(yuanxw)

_否极泰来_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue父子组件
qq_58590962的博客
08-05 2391
1.什么是父子组件？ 在一个组件中又定义了其他的组件就是父子组件。 其实局部组件就是最简单的父子组件，因为我们说过可以把vue实例看作是一个大组件。 我们在vue实例中定义了局部组件，就相当于在大组件里面定义了小组件，所以局部组件就是最简单的父子组件。 2.如何定义其他的父子组件 前面我们说过，自定义组件中可以使用data，可以使用methods,当然子定义组件中也可以使用components，所以我们也可以在自定义组件中在定义其他组件。 ...
vue父子组件传值
热门推荐
upStar1的博客
03-01 2万+
记录一下项目中遇到的问题。 因为一个流程对应一种单据，所以每次点击单据详情，应该出现相应的单据内容。在另一个页面，也需要调用这个单据内容。 因为vue不能直接调用弹出框，所以老师把单据内容写成了组件，在另一个页面直接调用这个组件就行。这个功能涉及到了父子组件传值的内容。（其实在本来显示单据内容的页面，只要根据后端传的内容判断显示哪个单据就可以，但是因为在另一个页面也需要调用单据内容，所以写成组件会更方便。由此，如果一个页面或者弹出框，在很多个页面需要用到，可以把这个地方的内容写成组件） ......
前端知识点-----父子组件的深入使用
qq_44973583的博客
07-06 922
调用自身组件
__vueParentComponent和__vue__获取dom元素上的vue实例
最新发布
WanweI897的博客
02-29 761
__vueParentComponent和__vue__获取dom元素上的vue实例
父子组件通信常用方法
...
10-07 3012
父子组件通信常用方法
vue3-实现父子组件之间的通信（详解+源码）
wzy_PROTEIN的博客
06-07 7032
vue3相对于vue2的父子传参方式有所改变，本文介绍三种：父组件给子组件传参、父组件调用子组件内的方法、子组件调用父组件的方法，如果不需要一种一种看可以直接下滑看全部代码，有注释也蛮好理解。
解读vue3中的$refs、$parent、$root、provide 和 inject
九仞山的专栏
06-09 6753
详细介绍了vue3中的$refs、$parent、$root、provide 和 inject各自的用法和优缺点
【微信小程序】基础篇 -- 自定义组件 - 父子组件之间的通信（三十八）
JMFive的博客
03-14 3627
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第38篇文章;今天开始学习微信小程序的第21天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。
vue-router v-slot及contextmenu
长歌的博客
04-28 2341
本篇工作总结，如果对您有帮助，看下就行，半公开。请不要转载，当然我写的一般都是很基础的内容，也没什么转载的必要 最近写代码过程中遇到了好多的bug和警告，本来写的还不成气候，不太适合记录。可是五一假期实在是太近了，再不记，恐怕假期后会忘光光。所以还是简单记录下吧。代码可能会有错误或疏漏，如有发现，还请指正。 下面一段是废话，可以略过。 下面我写的后台管理系统的页面标签功能，就是点击导航栏出现页签，点击页签会切换页面。这个后台管理系统大部分的代码都是抄的（咳，借鉴？？！）若依的vue2，vue3以及Ar
VUE3使用keep-alive页面切换时报错：parentComponent.ctx.deactivate is not a function
qq_15197419的博客
02-18 9677
问题描述： 这是官方示例代码： <router-view v-slot="{ Component }"> <keep-alive> <component :is="Component" v-if="$route.meta.keepAlive"/> </keep-alive> <component :is="Component" v-i
（三）vue父子组件通信（二）
w_t_y_y的博客
05-19 158
父子组件通信注意事项： 一、单向传递问题：子组件一般不修改props中的数据 1、先看报错： 如果直接在子组件中修改props中的属性值，f12会有报错： [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on th.
Vue组件化之父子组件传值
小王博客基地
04-17 761
作为国内使用较多的前端框架——Vue，作为一名开发人员是必须要掌握的，小编作为一名后端人员。由于公司前端人员不足，也是学起来了Vue！框架的精髓就在于，组件化！一个页面拆分几个小组件，这就牵扯到组件之间的数据传输问题！比较常用的就是：父子组件传值，兄弟之间传值场景小编这里还没有遇到，所以本次就以常用的父子组件传值来结合例子说一下！从上述两种方式可以看出，props传值需要在子组件中预先定义需要接收的属性，在父组件中传递数据时需要使用v-bind或者":"进行绑定。
arco-design-vue的tree组件实现右击事件
qq_32021429的博客
09-05 847
业务中需要使用到tree组件，并且还要对tree实现自定义鼠标右击事件。在arco-design-vue的文档中，可以明确的看到，tree组件并没有右击事件的相关回调，那要如何实现呢？？？这里提供两种思路：1、使用插槽，在插槽中对DOM实现contextmenu事件（会有问题，下面会说）；2、使用事件冒泡机制，对tree实现contextmenu事件
vue父子组件进行通信方式
weixin_47450807的博客
02-07 5105
在vue中如何实现父子组件通信，本篇博客将会详细介绍父子组件通信的流程。 如图所示，父组件向子组件传递数据，可以通过props，子组件向父组件传递数据可以通过触发事件来进行。 一、props 父组件向子组件传递的数据，通过props进行传递，我们可以把props理解为属性。props传递存在两种格式，一种是数组格式，另一种是对象类型格式。其中第二种对象类型可以设置是否为必须数据，以及是否存在默认值数据。 第一种用法：数组 //父组件 <HelloWorld :title="title">&l
Vue组件(component)
weixin_40123451的博客
09-07 4239
Vue推荐开发方式是：SPA（single page (web) application）单页面web应用，一个应用中只能存在一个vue实例。
vue3 setup语法糖父子组件传值，让女友看得明明白白
sout-lanys
01-11 5177
vue3 setup语法糖父子组件传值
vue组件传值的详细使用教程（父到子，子到父，兄弟间，祖孙间, 全局数据管理）
bamboozjy的博客
07-31 684
父到子： father.vue中： <router-view :data="d" msg="hello"></router-view> data() { return { d: "发送给兄弟的数据" }; }, son.vue中：（在export defaullt内部添加属性props） props: ["data","msg"]...
Vue之父子组件
FAKELOVEV的博客
03-15 2598
父组件向子组件传值 //父组件引用子组件 <component ref="component " :key="componentKey" :ID="ID" @closeDetail="closeDetail"/> //子组件接收传值 const props = defineProps({ ID: String }); 子组件向父组件传值 //子组件定义方法传值 proxy.$emit("closeDetail", true); //父组件引入组件时定义方法 function clos
vue之创建父子组件
weixin_44474200的博客
05-18 606
我认为就是父子调用，如果会一门语言的话就比较好理解。 理解为作用域，父可以调用子的组件。爷爷可以调用父组件， 但是如果想要爷爷组件成功调用孙组件，必须在爷爷组件内都注册一遍。否则会报错。 <div id="app"> <cpn2></cpn2> <cpn1></cpn1> </div> <script> //先创建子组件 const cpnC1 = Vue.extend({
vue3中父子组件通信
12-08
在Vue3中，父子组件通信有以下三种方式： 1. 父组件给子组件传参： 父组件中通过props向子组件传递数据，子组件中通过props接收数据。 2. 子组件调用父组件的方法： 父组件中通过v-on绑定一个方法，子组件中通过$emit触发这个方法，并传递数据。 3. 子组件暴露属性给父组件： 子组件中通过defineExpose暴露属性或方法，父组件中通过ref获取子组件实例，再调用子组件的属性或方法。 以下是三种方式的代码示例： 1. 父组件给子组件传参： 父组件中： ```vue <template> <child-component :message="msg"></child-component> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent, }, data() { return { msg: 'Hello World', }; }, }; </script> ``` 子组件中： ```vue <template> <div>{{ message }}</div> </template> <script> export default { props: { message: String, },}; </script> ``` 2. 子组件调用父组件的方法： 父组件中： ```vue <template> <child-component @change-visible="handleChangeVisible"></child-component> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent, }, methods: { handleChangeVisible(visible) { console.log(visible); }, }, }; </script> ``` 子组件中： ```vue <template> <button @click="handleClick">Change Visible</button> </template> <script> export default { methods: { handleClick() { this.$emit('change-visible', false); }, }, }; </script> ``` 3. 子组件暴露属性给父组件： 子组件中： ```vue <template> <div>{{ message }}</div> </template> <script> import { defineExpose } from 'vue'; export default { setup() { const message = 'Hello World'; defineExpose({ message, }); return { message, }; }, }; </script> ``` 父组件中： ```vue <template> <child-component ref="child"></child-component> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent, }, mounted() { console.log(this.$refs.child.message); }, }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值