Vue.js -如何在父组件的DOM元素之外创建子组件的DOM元素
Vue.js是一种流行的JavaScript框架，用于构建用户界面。它采用了组件化的开发方式，允许开发者将页面拆分为多个可重用的组件。
在Vue.js中，可以通过使用组件的方式在父组件的DOM元素之外创建子组件的DOM元素。具体的步骤如下：
- 首先，在父组件中引入子组件。可以使用Vue.js提供的
import语句或者require函数来引入子组件的代码。 - 在父组件的
components选项中注册子组件。这样Vue.js就能够识别并使用子组件。 - 在父组件的模板中使用子组件。可以在需要的位置使用子组件的标签，Vue.js会自动将其替换为子组件的DOM元素。
通过以上步骤，就可以在父组件的DOM元素之外创建子组件的DOM元素。
Vue.js的优势在于其简洁的语法和灵活的组件化开发方式。它提供了丰富的功能和工具，使得开发者可以更高效地构建交互式的用户界面。
Vue.js的应用场景非常广泛，可以用于开发各种类型的Web应用。它适用于单页面应用（SPA）和多页面应用（MPA），可以与后端框架（如Node.js、Spring Boot等）配合使用。
腾讯云提供了一系列与Vue.js相关的产品和服务，包括云服务器、云数据库、云存储等。其中，推荐的腾讯云产品是云开发（CloudBase），它是一款全栈云开发平台，提供了丰富的后端服务和工具，可以与Vue.js无缝集成。您可以访问腾讯云云开发的官方网站了解更多信息：腾讯云云开发
总结：Vue.js是一种流行的JavaScript框架，用于构建用户界面。通过组件化的开发方式，可以在父组件的DOM元素之外创建子组件的DOM元素。腾讯云提供了与Vue.js相关的产品和服务，推荐使用云开发（CloudBase）进行全栈云开发。
相关·内容
1回答
当我设置strict: true时，我会得到错误：
vue.js:525 [Vue warn]: Error in watcher "state"
(found in root instance)
warn @ vue.js:525
run @ vue.js:1752
update @ vue.js:1720
notify @ vue.js:584
reactiveSetter @ vue.js:814
Transform.resize @ transform.js:169
e.resize @ map.js:343
e._onWindowResize @ map.js:12
浏览 2提问于2016-12-29得票数 1
回答已采纳
3回答
我是Vue.js的新手。我对Vue组件之间的通信做了一些简单的练习。但我仍然有一个问题，谁是孩子，谁是家长。例如，我有以下代码：
HTML:
<body>
<div id="root" class="component">
<coupon @applied="onCouponApplied"></coupon>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js
浏览 7提问于2019-08-14得票数 1
回答已采纳
React有类似于this.props.children的东西：
Vue.js是否也有一些类似的访问子元素？
浏览 2提问于2016-08-16得票数 11
回答已采纳
1回答
我的反应组件上有z指数叠加的问题。代码库太复杂了，当我试图从那里做建议时，它不起作用。简化的问题可能类似于。
我想做的只是在打开侧边栏菜单时做一个背景覆盖(默认情况下它是隐藏的)。这个侧边栏菜单是顶部导航条的子菜单。和div覆盖背景是兄弟姐妹到顶部肚脐。
就像这样：
<div className="overlay" />
<TopNavbar>
<SideMenuBar>
</SideMenuBar>
</TopNavbar>
TopNavbar有z-索引=900.如果我将div覆盖z索引设置为901，将Sid
浏览 0提问于2018-10-29得票数 0
2回答
如何在vue js中使用监视功能
、、、、
请您告诉我如何在vue js中使用.I试图使用的watch函数，但我得到了这个错误。
vue.js:485 [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 the prop's value. Prop being mutated: "m"
found in
---> &l
浏览 2提问于2017-09-02得票数 1
我有一些导航，这是一个react组件。然后，我在我的页面下面的内容中有一个链接。单击链接时，我想向导航组件添加一个CSS类。
它们是完全独立的组件。
在过去，我可能会使用jQuery来定位导航，然后使用addClass()函数。我正在努力在React中弄清楚这一点。
浏览 0提问于2018-01-18得票数 0
我使用React 16并需要门户，但无法找到有关此特性的任何文档。有人知道怎么用这个吗？
谢谢你的建议。
浏览 9提问于2017-09-24得票数 50
回答已采纳
像vue.js的$('#id')一样，JQuery也有document.getElementById('#id')的简写吗？
如果是这样，文档中对此的引用在哪里，以便我可以找到其他信息？
浏览 5提问于2016-05-02得票数 59
2回答
Vue呈现按钮
、、、
我的问题是在vue实例上呈现一个按钮，点击一个按钮，然后再用事件单击呈现另一个按钮，如果我简单地挂载这个按钮，它就不会得到函数tes。
const Hello = {
props: ['text'],
template: '<button v-on:click="tes"> </button> ',
};
new Vue({
el: '#app',
data: {
message: 'Click me'
},
methods:{
alerta
浏览 1提问于2018-06-15得票数 0
回答已采纳
如何在不重新加载Vue.js页面的情况下更新多个地方的数据？
这就是我的例子。
当我添加一个新应用程序时，会创建一个新的提醒。如何在页面的不同位置使用这些数据？
重要：所有元素都在不同的组件中。
浏览 2提问于2017-11-16得票数 0
回答已采纳
我使用的是Vue.js，我试图获得ref=“mybtn”和ref=“confirmpopover”的宽度，但是无法得到ref=的宽度“confirmpopover”。我不明白为什么，它说的是没有定义。
试图获得未定义的getBoundingClientRect。
export default {
template: `
<div @click="openPopover" ref="mybtn">
<ml-confirm-popover ref="confirmpopover" />
浏览 2提问于2019-02-26得票数 1
回答已采纳
1回答
我有一个组件，它打开一个引导模式(使用react-bootstrap4-模态)
它使用以下方法打开和关闭
{this.state.inEditMode ? <MemberModal /> : null}
但是，由于组件已经嵌套在DOM中的某个地方，所以它不是引导模式标记的有效位置。它在底部留下了一个讨厌的白色条，如果它位于最外层的<App/> div标记中，就不会发生这种情况。
有什么简单的方法来解决这个问题吗？还是需要我将所有的模态组件都放在<App/>中，并从嵌套的子级中更改<App/>的状态？
浏览 1提问于2018-05-31得票数 0
回答已采纳
2回答
因此，我需要呈现“警报”组件，它通知用户组件内部函数中的成功操作，它将项添加到cart/localstorage中。
警报组件：
class Alarm extends React.Component{
render(){
return(
<Alert color="success">
This is a success alert — check it out!
</Alert>
)
}
}
在另一个组成部分
浏览 1提问于2019-04-25得票数 2
回答已采纳
形势
假设我有一个组件BaseButton，它只是围绕一个<button>元素的一个简单包装：
Vue.component('base-button', {
template: `
<button>
<slot />
</button>
`
});
在使用该按钮时，我希望将处理程序绑定到此按钮上的单击事件：
<base-button @click="handler">
Click me
</base-button>
问题所在
以上解决方案不起作用。处
浏览 7提问于2018-05-29得票数 2
回答已采纳
我试图找到一个比较或一个理由，为什么Vue需要refs来控制一个元素，而不是使用经典的css ids来控制一些元素，比如div，有人能解释这种区别吗？裁判有表演优势吗？
<div ref="hello">
</div>
<div id="hello">
</div>
更新：
我不是问这是基于意见的答案或只是风格，我正在寻找任何线索，关于性能差异的两种方法。
浏览 2提问于2020-11-09得票数 2
1回答
我最近一直在学习Vue.js，并且很难理解的概念。
根据我从文档示例中了解到的情况，子组件只能在父组件内部工作。
<parent-component>
<my-component></my-component>
</parent-component>
然而，我无法达到这一结果。有人能告诉我我哪里出错了吗？
这是让你玩。
浏览 4提问于2016-02-01得票数 0
回答已采纳
3回答
因此，我在我的vue.js应用程序中使用vutificy2.0，我试图在我的Main.vue中制作我的v容器，使用填充高度和流体获取所有可用的高度，但它似乎根本不起作用。
我现在拥有的是如下所示:
截图：
App.vue
<template>
<v-app>
<div v-if="connected">
<Main />
</div>
<div v-else>
<Login />
浏览 5提问于2020-01-21得票数 20
回答已采纳
我真的很困惑于输入元素的"ref“属性。我从来没有听说过基于我的知识，也找不到一些关于it.The代码的有意义的材料是在vue.js官方文档中。
<currency-input v-model="price"></currency-input>
这是关于组件的代码：
Vue.component('currency-input', {
template: `
<span>
$
<input
ref="input"
v-bind:va
浏览 2提问于2017-05-19得票数 78
回答已采纳
2回答
我有一个containerElement和一个react组件。我想将react组件添加到containerElement中。有没有办法让我这么做？我尝试过containerElement .appendChild()，但不起作用。
const containerElement = document.getElementById(divId);
React component: <ReactComponent></ReactComponnet>
浏览 48提问于2020-03-13得票数 0
2回答
顺便说一句，在文档中，vue.js中的属性是单向绑定的：
请注意，JavaScript中的对象和数组是通过引用传递的，因此如果属性是数组或对象，则在子级中改变对象或数组本身将影响父状态。
所以我想知道，prop.sync是只用于"litteral“(即字符串、数字、日期)，还是必须与对象/数组一起使用？
我已经使用对象没有同步，所有的工作都很好，但我担心这不是做"vue.js“方式的好解决方案？
所以我的问题是:我可以在prop中使用对象/数组吗，没有同步，没有问题？
浏览 1提问于2018-01-28得票数 0
2回答
出于某种原因，我需要在Vue.js运行所需的id #应用程序的div之前，在html中呈现一个组件。
这可能吗？
浏览 1提问于2019-03-22得票数 2
回答已采纳
2回答
我有这个组件，并希望将一个参数/prop传递给该组件，告诉它使用哪个x-template。当我这样做的时候，它失败了：
JS：
Vue.component('custom-table', {
props: ['template'],
template: '#' + this.template
})
new Vue({ el: '#app' })
HTML：
<custom-table template="my-template"></custom-table>
<sc
浏览 2提问于2019-11-08得票数 0
我是vue.js的新手。我想问:如何重复添加组件？如果附加的组件是子组件，那么子组件如何将值传递给父组件，父组件如何标识哪个子组件传递了值？
浏览 1提问于2018-09-03得票数 0
回答已采纳
我在子组件-> kpi_kalite[]中有道具
父组件->装入()：
*(此kpi_kalite是在父组件的数据中创建的)
axios.get(URL+ "/KPI/").then(response=>{
console.log(JSON.parse(JSON.stringify(response.data)))
this.kpi_kalite.push(response.data[0])
})
我在父组件集中“获取请求”，并将response.data推到kpi_kalite
我用这个阵列做道具。
然后，我想做console.log(
浏览 8提问于2021-09-17得票数 4
回答已采纳
1回答
我想问您，在VUE.JS组件'A‘中，是否有可能调用另一个使用组件'A’的VUE.JS组件'B‘的方法。
谢谢
浏览 5提问于2020-10-09得票数 0
回答已采纳
我正在使用vue.js和vuetify。 由父元素生成的元素存在于我的代码中。 我希望根据父类的子类动态地更改父元素的类，就像jQuery has()方法一样。 vue.js有什么办法做到这一点吗？ jQuery has()
浏览 40提问于2020-09-03得票数 0
回答已采纳
2回答
使用Vue.js，可以从全局javascript范围访问实例化的Vue.js组件对象吗？还是Vue的内部元素实例化对象的方式使它们无法访问？
也就是说，我有定义组件的代码
Vue.component('component-name', {
/*...*/
});
然后标签使用该组件
<component-name>
/* can user templates with component objects vars {{foo}}
</component-name>
Vue的模板呈现代码最终是访问javascript对象。有什么方法可以让我通
浏览 7提问于2017-06-26得票数 1
回答已采纳
当我到达分步组件的末尾时，如何打开与分步组件解耦的单独组件？
这是我的react功能组件的一部分，用于控制向前导航。当我到达“完成”按钮时，我希望组件打开：
<ButtonContainer>
{activeStep !== 0 && (
<PrevButton onClick={handleBack}>Back</PrevButton>
)}
浏览 0提问于2021-04-14得票数 0
2回答
虽然我被路由到'myFavouritePage'，但是‘嗨，我是孩子’是在路由到'myFavouritePage‘之后被打印出来的。父级中是否有一个函数，在完成后创建子组件？父级：
beforeCreate () {
var orderNumber = this.$store.state.myStore.order.number
if (!orderNumber) {
this.$router.push({name: 'myFavouritePage'})
}
}
儿童：
mounted () {
coso
浏览 5提问于2017-02-17得票数 3
回答已采纳
3回答
从react门户的文档中：
门户的一个典型用例是父组件存在溢出:隐藏或z索引样式，但您需要子组件直观地“释放”其容器。例如，对话框、悬停卡和工具提示。
建议的解决办法是使用：
// this line is rendered in `Portal1` component,
// which is rendered in `Parent1` component.
ReactDOM.createPortal(Child1, Container1)
我不明白它能解决什么问题。为什么让Child1的孩子Container1而不是Parent1有帮助？
我的问题可能不清楚，所以如果它不->
浏览 0提问于2018-12-09得票数 3
回答已采纳
3回答
我是vue.js新手，我正在努力了解如何使用$emit。在下面的代码中，除了最后一个元素之外，每个input元素都按预期工作。
我在上一个input元素中的假设是，使用事件名调用$emit与调用具有该事件名的函数相同，但它不调用该函数。这个$emit发生了什么？
我已经阅读过，这表明它将在我所做的工作中被不同的使用。所有这些方法都是从我观看YouTube视频(7种秘密模式.)开始的，特别是在这个时候，你可以在幻灯片上看到的用法。
以下是JSFiddle 中的代码
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js&#
浏览 0提问于2018-09-15得票数 1
回答已采纳
假设我有一个父组件和一个子组件。
<code>A0</code>
现在，我想将id从父组件传递给子组件。我将访问函数showIdFromOutside()。这就是我的父组件的样子：
<code>A1</code>
然而，在我实现了它之后，我遇到了一个类似如下的错误：
<code>A2</code>
现在我该如何解决这个问题？
浏览 19提问于2020-07-31得票数 0
回答已采纳
我在vue.js中很难理解这个概念。 我假设Vue中的组件是一个具有某种(html)表示和内部数据或状态的实体。然后，组件可以根据用户与模板的交互来更改其内部数据，并通过事件通知“外部世界”其内部更改。 但是，为了将组件作为一个整体放在应用程序的上下文中，大多数组件需要从“外部世界”接收数据，这将通过props来完成。因此，对于一个有用的组件，它通常不仅需要改变它的内部状态，还需要改变它从外部上下文中获得的一些数据--但属性不能直接改变。内部数据用于组件的内部工作，但组件的真正目的是转换props中的数据。 假设我们有一个组件，它通过props给出了一个表示用户配置文件的对象。组件的作用是让
浏览 12提问于2020-04-13得票数 0
我是vue.js的新手。我有一个要求，开发一个经典ASP项目的日程安排功能的日历。我做了一些研究，在使用vue.js开发的GitHub上找到了以下项目。
我可以使用这个项目将该功能作为一个单独的应用程序来实现。但是我需要将这个插入到经典的ASP项目中，因为没有API可以单独开发。
我花了很多时间来寻找如何实现这一点，但找不到一个简单的指南。任何帮助都将不胜感激。谢谢。
浏览 1提问于2018-10-04得票数 0
如何获得使用Vue.js呈现dom元素的组件？
例如，假设您想检索用户选择的哪个组件“拥有”一个dom元素，您将如何做？(它似乎是在开发工具中实现的，但我在文档中和在开发工具上都找不到一种方法)
(我的意思是，给定DOM元素，我知道如何检索所选择的元素)
免责声明:对于普通用例来说，这可能不是正确的解决方案。总是喜欢处理事件和公司。在根组件中，如果可以使用，则使用直接子组件引用。
浏览 6提问于2018-08-01得票数 2
5回答
我想从父级获取vue.js组件的维度(我正在使用实验性的)。
当我在组件中使用ref时，它会像预期的那样工作。我知道尺寸：
// Child.vue
<template>
<div ref="wrapper">
// content ...
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const wrapper = ref(null)
onMounted(() => {
cons
浏览 4提问于2021-04-10得票数 25
回答已采纳
在下面的代码中，我有父/子组件，其中一些数据(我只是使用文字)从根上下文(data1)传递，而其他数据则应用到parent组件(data2)中的slot中。输出显示data1是可用的，但data2是不可用的。
为什么data2文本没有传递给子组件？我已经在谷歌上看到过使用template的引用，但我不明白为什么在本例中我不使用v-bind。
我怀疑我误解了什么，但肯定会感谢你的帮助！
Vue.component(
'child', {
props: ['data1', 'data2'],
template: `
<d
浏览 2提问于2018-01-02得票数 0
回答已采纳
1回答
如何为依赖于React中当前组件中的API调用的模式制作独立组件
我有以下API调用
class Designs extends Component {
//after constructor I have a function which makes an api call:
async componentDidMount() {
const designs = await axios.get(`${DESIGN}`);
this.setState({ rawDesigns: designs.data.documents }); //rawDesigns is an arra
浏览 1提问于2021-01-26得票数 0
6回答
React中“父组件”的定义是什么？
例如：
const A = () => {
return (
<B>
<C/>
</B>
);
}
A是C的父母吗？
B是C的父级吗
后续行动：
B通过children支柱获取C元素。如果C是B的孩子，那么B应该是C的父级。但实际上，这应该是一个containment，正如所提到的。
浏览 9提问于2022-03-09得票数 5
如何在点击按钮时将div附加到正文？
const MyEl = () => {
return (
<>
<div>Hello</div>
</>
);
};
const AppendHtml = () => {
return (
ReactDOM.createPortal(
<MyEl />,
document.body
)
);
};
我想在每次单击按钮时追加MyEl co
浏览 7提问于2021-09-06得票数 0
React是在状态或propr保持不变时呈现的。我不明白它为什么要重新更新/更新，因为结果不会改变
class A extends Component {
render() {
console.log("Hello")
return "Foo";
}
}
class App extends Component {
constructor(props) {
super(props);
this.state = { a: "ASDA" };
}
render() {
return (
浏览 4提问于2020-03-22得票数 3
回答已采纳
我正在学习Vue.js。目前，我正在努力理解事件发生。在Vue，有。除self修饰符外，我理解所有这些修饰符的用途。self修饰符是什么？stop修饰符似乎与self做了同样的事情。我什么时候会使用self
谢谢你的帮助。我觉得我一定是误会了。我只是不明白self的目的。
浏览 2提问于2017-03-13得票数 5
回答已采纳
14回答
假设我有一个包含子组件的主Vue实例。是否有方法从Vue实例外部调用属于这些组件之一的方法？
下面是一个示例：
var vm = new Vue({
el: '#app',
components: {
'my-component': {
template: '#my-template',
data: function() {
return {
count: 1,
};
},
methods: {
increas
浏览 8提问于2015-11-12得票数 325
回答已采纳
我得到了这个错误，并跟踪到以下内容：
class Outer extends Component {
bdElements() {return e.div()}
}
class Inner extends Component {
bdElements() {return e.div('hello how are you')}
}
class ThisWorks extends Component {
bdElements() {
return e.div(
e(Outer, {}, e(Inner))
浏览 14提问于2022-11-22得票数 0
1回答
我试图在我的组件中改变PrimeNg手风琴的样式：简单的变化，比如字体风格，颜色变化.页面上说我可以用styleClass传递一个样式。这对我不起作用。
在我的组件中，我可以通过以下方式删除阴影：
::ng-deep .p-accordion .p-accordion-header:not(.p-disabled) .p-accordion-header-link:focus {
box-shadow: none;
}
据我所知，不建议使用ng深度。没有ng深度，除非我将CSS放入一个“全局”CSS文件中，否则不会发生任何事情。但它不只是改变了我自己的成分。
此外，CSS选择器是疯狂的长，
浏览 6提问于2021-09-18得票数 0
2回答
我想知道在Vue js应用程序中访问DOM可以吗？例如，如果我想将一个元素(div)附加到body标记中，这建议在Vue js方法中使用document.getElementById吗？
我没有可用于根据数据生成或删除元素的数据。我真的想知道使用document访问Vue js中的DOM是否很常见？
就像这样：
methods:{
appendToBody(){
let node = document.createElement("div");
document.getElementById("#body").appendChild(node);
浏览 0提问于2019-03-18得票数 4
回答已采纳
这一点对我来说还不清楚，而且我也找不到任何关于它的文档。
当要卸载React组件(即调用componentWillUnmount )时，是否保证所有后代都将正确卸载(因此也调用了componentWillUnmount )？
换句话说，在卸载阶段，整个层次结构(沿着起始节点)将被移动，或者仅仅是要删除的确切节点？
浏览 2提问于2019-06-03得票数 2
回答已采纳
1回答
我已经使用Vue.js几个月了，它一直在提醒webforms范例，您使用组件来创建一个网站或was应用程序，但是对于Vue.js来说，创建这样的东西是一种乐趣，而不是整个webforms的噩梦。
好吧，我的问题是，是否有可能在标记方式上仅仅为它的父级定义一些行为就制作嵌套组件。示例：
<grid prop1="somevalue" prop2="somevalue">
<grid-column prop1="somevalue" prop2="somevalue">
<filter-opt
浏览 1提问于2017-10-10得票数 1
回答已采纳
2回答
如何在单击时动态创建元素？
我试图实现的是一个表单构建器，类似于typeform。我的想法是我会有两个领域。第一个字段是我可以单击按钮来选择表单输入类型、文本输入区域、选择框或单选按钮的地方，当我单击该元素时，react将动态地为我创建该元素。
我不知道是否有人理解我，但我会感谢你的任何回应。谢谢
这就是我所做的，但我没有--这不是正确的反应方式
import React, {
Component
} from 'react';
import ReactDOM from 'react-dom';
import logo from './logo.sv
浏览 3提问于2018-05-30得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
