文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue子组件怎么获取父组件的内容

2023-06-30 07:06

关注

本篇内容介绍了“vue子组件怎么获取父组件的内容”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

子组件如何获取父组件的内容

props属性

组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。

想要引用父组件需要:

<bbb v-bind:myMsg="msg"></bbb>//子组件将父组件的数据msg绑定到myMsg上bbb:{    props:{        'myMsg':String  //绑定数据的类型    }}

注:props也可表达成如下:props:['myMsg'] 

完整实例如下:

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script src="js/vue.js"></script></head><body><div id="example">    <aaa></aaa></div><template id="aaa">    <h2>{{msg}}</h2>       //父组件    <bbb :my-msg="msg"></bbb> //子组件</template><script>    window.onload=function(){        new Vue({            el: '#example',                 data:{                     },            components:{                aaa:{                    data:function(){                        return{                            msg:'我是父组件的数据'                        }                     },                    template:'#aaa',                    components:{                        bbb:{                            props:{                                'myMsg':String                            },                            template:'<h3>我是子组件-->{{myMsg}}</h3>'                        }//当html中使用my-msg时,在js中需使用驼峰命名myMsg                    }                }            }    })    }</script></body></html>

最后的结果如下图:

vue子组件怎么获取父组件的内容

vue父&rarr;子组件的props传值

需求1

如果要将自定义属性里的值传递给模板,可以使用props属性:

vue子组件怎么获取父组件的内容

写法注意的地方:

props的大小写:对于html里的短横线命名,在vue里面要用小驼峰命名法(大驼峰命名介绍:第一个字母也是大写);

vue子组件怎么获取父组件的内容

template里必须有一个根目录:

vue子组件怎么获取父组件的内容

需求2

实际项目中我们经常要将data里面的值传递给模板,操作如下:

vue子组件怎么获取父组件的内容

思路:使用v-bind和data数据绑定,将值传递到组件的模板里的插值里.

另一个案例:

效果图:

vue子组件怎么获取父组件的内容

传递的过程总结:准备一个大的组件(在vue实例里)和一个子组件son,在son子组件里使用v-bind绑定要传递的message属性,message属性值是对应父组件里的data值,然后在son子组件component方法的第二个参数的对象里增加一个props属性(重点是这个props属性,它是用来接收父组件的值的),值是数组,里面就填字符串形式的message,最后直接在子组件的模板里用插值的方式使用这个message就可以了.

同时,也要了解子组件同步修改父子组件的值,操作如下:

vue子组件怎么获取父组件的内容

子组件修改父子组件值的操作过程:

在子组件里定义一个修改的方法,在方法里添加this.$emit()方法,它有两个参数,第一个是自定义事件名,第二个是要修改的值,接着在父组件里用v-on添加这个自定义事件,值写父组件方法,在这个方法里用(美元event)作为参数,在父组件方法里接收并操作自己要修改的逻辑操作即可.

“vue子组件怎么获取父组件的内容”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯