解决vue引入组件报错,和调用组件步骤及封装步骤

news/2024/7/24 6:13:43 标签: javascript, vue.js, html
htmledit_views">

这里调用了组件然后报错Unknown custom element: <myAddress> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

讲的是调用<myAddress>组件找不到,那么就是我引入组件的地方有问题。那就去看看

的确是有问题,因为引入组件不能用{},把它去掉就行了。

接下来说一下,如何调用组件,和父组件获取子组件的属性值。

首先看一下父组件:

HTML调用子组件<myAddress>,ref="XXX",ref是用来获取子组件里的属性值的,用法是this.$refs.headerChild.属性 this.$refs.headerChild.方法

js部分,引入子组件和注册(import myAddress from "../../components/pages/address";这里的myAddress对应的事HTML<myAddress>标签名称)

获取子组件的属性值:

接下来可以看看子组件:

HTML部分:

JS部分:

就是这样实现了简单的组件封装和组件调用!!!!!!!!!!!


http://www.niftyadmin.cn/n/825461.html

相关文章

div从上到下从左到右自动换行显示排列

先看效果图&#xff1a; .box{//外部的div盒子 display: flex;//先设置div里的内容显示同一行 justify-content: flex-start;//左右布局 flex-wrap: wrap;//换行 align-content: flex-start;//紧揍排列 } .child1 ,.child2{//div里的内容块 width: 100px; height: …

DatePicker日期限制时间段

1.只能选择当前及以后的日期 <el-date-pickerv-model"value1"type"date":picker-options"pickerOptions"> </el-date-picker>data() {return {pickerOptions: {disabledDate(time) {return time.getTime() < Date.now() - 8.64e7…

地铁框架保护的原理_“开往春天的地铁”需要更多宽容与理解

1月1日,历时三年多的建设,济南轨道交通R1号线正式开通试运行,结束了济南没有地铁的历史,这趟被称为“开往春天的地铁”承载了泉城市民多年的期盼与等待,然而开通后却也遭到了一些戏谑与嘲讽。“第一条从郊区开往郊区的地铁”“成功避开城区所有核心区域与繁华路段”“大批市民开…

hadoop合并日志_hadoop面试题!这6个!经常问!

您是否很快准备接受面试并需要了解Hadoop&#xff1f;不要惊慌&#xff01;以下是您有可能会被问到的一些问题以及我为您提供的答案。 希望对你有帮助哦&#xff01; 正 文 来 啦 问题一&#xff1a;什么是Hadoop&#xff1f;Hadoop是一个开源软件框架&#xff0c;用…

element输入框限制内容为整数

οninput"valuevalue.replace(/[^\d]/g,)"

异步导致奇奇怪怪的问题

最近遇到了一个很奇怪的bug,点击下载的图片与名称顺序被打乱了 经过调试排查&#xff0c;发现在这个功能所用到的打包工具&#xff0c;打包是需要一定时间&#xff0c;同时它并没有回调&#xff0c;导致异步执行了&#xff0c;使得顺序被打乱 然后我就是使用了延迟处理的方法让…

vue的form表单输入框输入不了内容

是因为你可能在赋值之前给被赋值的对象转换了数据&#xff0c;得给赋值得对象转换数据然后赋值给被赋值的对象就行了

创建vue项目(vue+elementUI+vuex+vue-router+axios)vue全家桶

1、先在你要放项目的地方创建一个文件夹 2、点进入文件夹输入cmd 3、在黑窗口先检查是否有环境&#xff0c;查看node环境&#xff1a;node -v&#xff0c;查看vue-cli&#xff1a;vue -V或者vue -list有版本号出来就证明已经存在无需安装 没有的话就先下载node.js安装 然后使…