将道具传递给挂载在现有标记上并使用Vue.extend创建的实例
，是指在Vue.js中使用Vue.extend方法创建一个新的Vue实例，并将数据通过props属性传递给这个实例。
Vue.extend是Vue.js提供的一个全局API，用于创建可复用的组件构造器。通过Vue.extend方法创建的组件构造器可以像普通的Vue组件一样使用，并且可以接收父组件传递的数据。
具体步骤如下：
- 使用Vue.extend方法创建一个组件构造器，例如：var MyComponent = Vue.extend({ props: ['propA'], template: '<div>{{ propA }}</div>' });new MyComponent({ propsData: { propA: 'Hello World' } }).$mount('#app');<div id="app"> <my-component prop-a="Hello World"></my-component> </div>
- 创建一个新的Vue实例，并将组件构造器挂载到现有标记上，例如：
- 在现有标记上，使用props属性传递数据给组件实例，例如：
这样，通过props属性传递的数据就可以在组件实例中使用，实现了将道具传递给挂载在现有标记上并使用Vue.extend创建的实例的功能。
这种方式适用于需要在现有标记上动态创建和挂载Vue实例的场景，可以实现组件的复用和灵活性。在实际应用中，可以根据具体需求选择合适的腾讯云产品来支持云计算和部署应用，例如腾讯云的云服务器、云函数、云数据库等产品可以提供稳定可靠的云计算基础设施和服务。更多关于腾讯云产品的信息和介绍可以参考腾讯云官方网站：https://cloud.tencent.com/
相关·内容
2回答
我正在使用Vue.extend手动地将一个组件挂载到一个动态元素，如下所示：
import Vue from 'vue';
import MyComponent from 'MyComponent.vue';
const MyComponentConstructor = Vue.extend(MyComponent);
const MyComponent = new MyComponentConstructor({
propsData: {
foo: 123,
},
}).$mount('#mount-point'
浏览 1提问于2017-06-09得票数 11
回答已采纳
3回答
我正试图为我的应用程序创建一个基于Vue和vue-cli的webpack模板的单元测试。
我读过Vue文档，vue-加载程序，vue-cli和vue-模板/webpack(更多！)当我试图为我的组件进行单元测试时，我使用以下方法。
const Constructor = Vue.extend(MyComponent)
vm = new Constructor().$mount()
像和
这个很好用。但发音是当我的部件有一些道具的时候。我试着用这个算了
const Constructor = Vue.extend(MyComponent)
vm = new Constructor({
m
浏览 5提问于2017-04-24得票数 8
回答已采纳
问题：有任何方法来更新像这样创建的手动挂载的vue组件/实例的支持吗？我正在传入一个名为item的对象，作为组件的data支柱。
let ComponentClass = Vue.extend(MyComponent);
let instance = new ComponentClass({
propsData: { data: item }
});
// mount it
instance.$mount();
为什么
我有一个非vue第三方库，它在时间线(vis.js)上呈现内容。因为我的应用程序的其余部分是用vue编写的，所以我尝试使用vue组件来处理时间线本身上的内容。
通过
浏览 6提问于2018-12-14得票数 12
回答已采纳
这似乎是一个相当基本的问题，但我似乎找不到一个明确的(甚至是有效的)答案。
我有我的根实例：
var vm = new Vue({
el: '#app',
// Data
data: {
events: {}
},
// Methods
methods: {
fetchEvents: function(){
this.$http.get('/api/events').success(function(theseEvents) {
this.$set('events', th
浏览 1提问于2016-03-01得票数 16
回答已采纳
使用vue v2.5.9和vue路由器v.3.0.1。
最小复制链接：
我试图使用<router-link>方法动态地将一个Vue.extend()元素插入到组件中。
Vue.component('markdown', {
name: 'markdown',
props: {
routeName: {
type: String,
required: true
},
routeLabel: {
type: String,
required: true
}
},
浏览 4提问于2017-12-20得票数 0
回答已采纳
1回答
我的项目中有一个功能组件，现在我需要实例化它，以便在JS中处理它。
我该怎么办？
我试过Vue.extend()，它不起作用。
我发现有人的密码是这样的：
function createInstance(FunctionalComponent, vnodeData) {
const instance = new Vue({
el: document.createElement('div'),
props: FunctionalComponent.props,
render(h) {
return h(
Functiona
浏览 8提问于2022-12-01得票数 1
class Clock extends React.Component {
render() {
return (
<div>
<MyComponent/>
</div>
);
}
}
假设此组件重新呈现。它会在每次渲染时创建一个新的MyComponent实例吗？
浏览 5提问于2018-08-05得票数 2
回答已采纳
1回答
我有一个问题，我试图传递一个对象“通过”一个组件，这是整体布局，坐在它里面的子组件。我已经做了一个简单的例子，基本上我有一个<ul></ul>模板和一个<li></li>模板。
当它们被创建的时候，我似乎正在丢失每一个的引用。当我创建它们时，我得到了错误：
vue.js:1023 [Vue warn]: Error when evaluating expression "model.id":
TypeError: Cannot read property 'id' of undefined (found i
浏览 0提问于2016-09-02得票数 0
回答已采纳
2回答
当最后一次触发事件时，我试图访问组件的道具。这个组件来自。
它有几个道具，如名称、值等。当触发更改时，我希望能够获得开关的名称或值。
更重要的是，如何访问触发更改事件的开关的任何道具？
我试过了但我不清楚。
<div v-for="organizer in organizers>
<el-switch @change="changeOrganizers($event.target.name, $event.target.value)" :name="organizer.name">
</el-switch
浏览 5提问于2017-01-31得票数 3
回答已采纳
嗨，现在我在一个我的投资组合网站上工作，我试图使一个按钮，使用相同的风格，但想要使用它的两个按钮(1)转到一些页面(2)下载简历。但它们都执行操作(1)。我不知道如何让这两个按钮做不同的工作。
这是Button的代码，
import React from 'react';
import './Button.css';
import { Link } from 'react-router-dom';
const STYLES =['btn--primary', 'btn--outline'];
const SIZE
浏览 2提问于2021-03-11得票数 0
我使用以下方法创建了这个孩子：
const ComponentClass = Vue.extend(someComponent);
const instance = new ComponentClass({
propsData: { prop: this.value }
})
instance.$mount();
this.$refs.container.appendChild(instance.$el);
当this.value在父类中更新时，它的值在子元素中不会改变。我试过看但没成功。
浏览 1提问于2020-04-13得票数 0
回答已采纳
4回答
我是Vue.js的新手。
我想注册一个本地组件，如下所述：
唯一的问题是，我需要将组件注册到现有的 Vue实例，而不是同时创建一个新实例，类似于：
const app = new Vue({
el: '#app'
});
app.component({
'my-component': {
template: '<div>A custom component!</div>'
}
});
我已经尝试过Vue.extend，但它不起作用。
编辑：
为什么我需要这个：
我正在创
浏览 2提问于2017-08-03得票数 5
我有一个组件，其中每个实例都需要向其传递一些数据，该组件被多次使用，并且该组件的所有实例都应该接收相同的数据/属性。
<my-component :someProp="someValue"></my-component>
<my-component :someProp="someValue"></my-component>
<my-component :someProp="someValue"></my-component>
<!-- ...and lots more.
浏览 15提问于2019-11-19得票数 0
回答已采纳
我对钥匙做了一些测试，我很难理解结果。我制作了一个计数器和应用程序来测试：
function Counter(props) {
const [cnt, setCnt] = React.useState(0);
setTimeout(() => {setCnt(cnt + 1)}, 1000);
return (<p>{props.heading}: {cnt}</p>);
}
function App() {
const [forceupdate, setForceupdate] = React.useState(0);
setTimeout
浏览 13提问于2022-07-21得票数 0
1回答
我想在Vue中创建我自己的复选框。我想使用两个图标从方框(锁定和解锁)。当选中我的复选框时，图标应该被锁定，否则会被解锁。
这是我的代码：
<template>
<div>
<i @click="statusChanged()" v-if="!checked" class="fas fa-lock-open lock"></i>
<i @click="statusChanged()" v-if="checked" class=
浏览 0提问于2018-10-19得票数 11
2回答
我正试图将reselect集成到我当前的应用程序中，像往常一样，我首先开始阅读文档，然后如果需要的话，再阅读另一个资源。我无法理解文档中的一个特殊部分，也找不到能在一个更清晰的way.Now中解释的资源--我来这里是为了得到一些清晰的解释。所以文件里写着‘
import React from 'react'
import Footer from './Footer'
import AddTodo from '../containers/AddTodo'
import VisibleTodoList from '../containers/
浏览 0提问于2018-10-02得票数 7
回答已采纳
2回答
Vue.js和他的路由系统给我带来了一些麻烦。我举了一个例子，。
为什么当我使用模板(见Foo)时，方法是正确附加的?为什么当我使用el (参见Bar)时不正确呢？
这是他的密码：
index.js
var Foo = Vue.extend({
template: '<p v-on:click.prevent="foo">This is foo!</p>',
methods: {
foo: function(){
alert('YEAH')
}
}
})
va
浏览 3提问于2016-04-13得票数 0
回答已采纳
我有两个组件。其中一个创建另一个的实例，并将它们添加到一个数组中，然后我尝试观察它来执行一些函数，但它从不触发。我的结构看起来像这样： const Child = Vue.extend({
data() {
triggerMe: false
},
methods: {
triggerSomething: function() {
console.log('It's called for sure');
this.triggerMe = true;
}
}
});
const Parent = Vue.e
浏览 9提问于2020-09-29得票数 0
回答已采纳
我正在使用react路由器创建一个应用程序，其中包括一个上传视频的Uploader组件和一个查看视频的Videos组件。视频页面将一些评论存储为状态，我希望在整个应用程序打开的整个页面上保留这个状态。然而，react路由器似乎导致每个组件重新挂载而不是重新呈现，导致每当我重新路由回Video组件时，我的状态被重置为初始的空值。在我的render组件中，我使用的是component方法，而不是component方法，所以我不明白为什么会发生这种情况。有人知道是什么原因造成的吗？
下面是进行路由的主要应用程序：
class App extends React.Component{
con
浏览 2提问于2019-09-20得票数 4
回答已采纳
使用react，在函数组件返回的JSX代码中，我可以拥有：
MyComponent.jsx
<MySubComponent props1={{a: 0, b:1}}/>
OR
<MySubComponent props2={["toto", "tata"]}/>
其中，我的子组件是通过回忆录导出的：
MySubComponent.jsx
export default React.memo(MySubComponent)
但是，这会破坏回忆化，因为格式为{.}或{.}的道具每次都会实例化一个新的对象/数组(值相同，但内存地址不同)，因此道具
浏览 2提问于2021-11-30得票数 1
2回答
我有一个容器组件，它处理所有的业务逻辑、ajax、数据等。
它有子组件，他将数据和方法作为道具传递。
因此，对于这个问题，有一个"CommentForm“组件，它在提交时获得一个作为函数调用的支柱。
现在，当子组件使用数据调用该方法时，所有操作都很好，但是现在我有两个选项：
数据很好，所以组件的输入是清晰的。
数据糟糕，显示错误
第二个选择很容易..。
但是首先，我如何告诉子组件清除它的内容，我是否需要为它创建另一个道具，还是另一个好方法？
**这段代码是我的代码在Vue.js中的一个例子，但这是一个类似于react的一般性问题
let Vue = require(
浏览 6提问于2016-09-15得票数 1
2回答
当我使用以下代码实例化功能组件时
const Component_Constructor = Vue.extend(Component);
let component_instance = new Component_Constructor();
component_instance.$mount();
组件在context函数上获得未定义的参数。
我如何传递参数(道具，插槽，孩子，.)到组件上？
浏览 1提问于2018-12-20得票数 6
我刚刚开始，所以我不知道这是不是我想要的行为，或者我是否遗漏了什么。我使用Flux架构(特别是回流，但这不应该是相关的)。在我的超级简单的测试应用中：
var App = React.createClass({
render: function () {
return (
<div className="container">
<Header />
<RouteHandler />
<div>
浏览 2提问于2015-03-03得票数 0
4回答
遵循，我尝试以编程方式在页面上创建组件的实例。
主要的片段如下：
import Button from 'Button.vue'
import Vue from 'vue'
var ComponentClass = Vue.extend(Button)
var instance = new ComponentClass()
instance.$mount()
this.$refs.container.appendChild(instance.$el)
然而，我得到了两个错误：
我试图实例化的组件包含对存储的引用，这些引用不起作用："TypeError
浏览 1提问于2018-11-09得票数 6
回答已采纳
我是新的反应，我想创建与外部点击关闭下拉菜单 我最终得到了类似这样的结果 ref={(node) => {this.node = node;}} 有人能解释这行代码是什么意思？
浏览 54提问于2018-12-24得票数 7
1回答
我正在编写一个呈现文本的组件。当一个单词以'@‘开头时，它是用户的引用(就像twitter中的那样)，我必须用用户的信息创建一个工具提示。
这就是我如何实例化用户的信息组件(这很好，我正在应用程序的其他地方使用它)：
const AvatarCtor = Vue.extend(AvatarTooltip);
let avatarComponent = new AvatarCtor({
propsData: {
user: user
}
});
这是TooltipWrapper组件：
<template>
&
浏览 0提问于2018-08-14得票数 1
回答已采纳
1回答
子组件重新安装
、、
我在render方法中有一个父组件Dash和一个子组件名为Team (都是类)
在它的渲染中我有：
<Route exact path='/team' component={() => <Team currCompany={this.state.currCompany} />} />
在这个团队组件中：
在渲染功能中：
<List component="nav" aria-label="main mailbox folders">
{this.mapstr
浏览 3提问于2021-05-19得票数 0
回答已采纳
我遵循一个带有Hooks在线课程的Advanced模式，在这个早期的例子中，他们用以下API创建了一个可扩展组件(比如经典的手风琴或可折叠面板)：
<Expandable>
<Expandable.Header>This is the header</Expandable.Header>
<Expandable.Body>This is the content</Expandable.Body>
</Expandable>
他们使用上下文将州expanded传递给可扩展的孩子。到目前为止还不错：
impor
浏览 1提问于2020-09-03得票数 3
回答已采纳
如果我动态创建一个Vue组件(使用Vue.extend并调用构造函数)，它就不知道Vue主题。如何将Vuetify注入到动态创建的新组件中？
浏览 10提问于2020-05-02得票数 0
我正在尝试找出更新在组件实例上创建的propsData的最佳方法。基本上我有一个签名包装器页面，并收到一堆html，这是使用v-html呈现的。然后在呈现的html中创建数量可变的签名板组件。因为我不知道html将会是什么，所以我被迫(最好是我能告诉你的)在挂载后动态创建组件。
因此，我在父mounted()上运行以下命令
initializeSignaturePads() {
const signatureAreas = document.querySelectorAll('.signature_area');
// dynamic
浏览 0提问于2018-06-28得票数 2
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
假设我有这样一个Vue.js组件：
var Bar = Vue.extend({
props: ['my-props'],
template: '<p>This is bar!</p>'
});
当vue-路由器中的某个路由匹配如下时，我想使用它：
router.map({
'/bar': {
component: Bar
}
});
通常，为了将'myProps‘传递给组件，我会执行如下操作：
Vue.component('my-bar', Bar)
浏览 12提问于2016-06-21得票数 74
回答已采纳
我试图在material UI中创建一个简单的卡片视图，当我实现添加和删除项目时，这些函数似乎在渲染时被调用了几次。 我知道通常的问题是使用action={myFunction}，但在这种情况下，我肯定使用了action={() => myFunction()}，所以我不确定是什么导致函数在render上被调用。 const App: React.FC = () => {
function deleteItem(key: string) : void {
console.log("deleting " + key);
setGridItemM
浏览 35提问于2019-06-09得票数 1
回答已采纳
2回答
我正在使用Formik构建一个用户输入表单。我正在使用withFormik处理我的表单。我目前在我的组件中传递我的handleSubmit，如下所示： export const CreateForm = withFormik({
mapPropsToValues: () => ({
primarySkill: "12"
}),
validationSchema: () => FormSchema,
handleSubmit: (values, { setSubmitting }) => {
setTimeout(() =&g
浏览 17提问于2019-06-24得票数 2
回答已采纳
关于React中的构造函数，我有一个问题
看看上的一个例子
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class SimpleComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
number: props.number,
}
console.log(&#
浏览 0提问于2019-01-30得票数 2
1回答
我有一个背景视频：
<video id="my-video" className="video" autoPlay muted loop>
<source src="./assets/fondoPrueba.mp4" type="video/mp4" />
</video>
这是设置为循环，但我需要防止它重新启动时，有某个组件的呈现。当存在componentDidMount()以外的呈现时，即第一个呈现时，是否有一种方法可以防止组件被呈现
<><div className
浏览 2提问于2022-03-07得票数 1
回答已采纳
我是一个新的反应和编程一般，并有一个关于componentWillReceiveProps方法的问题。在LikesComponent类内部，有一个执行ReactDOM.render(<LikesComponent likes={this.props.likes+1} />, document.getElementById("app"))的updateLikes方法。我认为每次调用<ComponentName />都会创建一个新的实例，这就是为什么当我看到componentWillReceiveProps方法记录的消息时感到非常惊讶的原因。相反，我希望看到
浏览 12提问于2017-02-13得票数 1
回答已采纳
3回答
我有一个组件，我在另一个组件中称为：
构成部分1
<template>
<FiltersComponent />
</template>
export default Vue.extend({
components: { FiltersComponent }
)}
因此，这个FiltersComponents有一些我想要访问到组件中的参数
构成部分2数据
data() {
return {
TestList: [] as string[],
Test2List: null as string[] | null,
浏览 5提问于2022-05-12得票数 0
回答已采纳
我的应用程序需要创建动态组件实例，为此我使用了以下方法：
import Button from 'Button.vue'
...
var Ctor = Vue.extend(Button);
var instance = new Ctor({ propsData: {} });
instance.$mount('#el');
这一切都很好，我也能通过道具。但是现在我也需要把插槽传递给那个实例。我尝试过一些随机的不成功的事情，比如：
var instance = new Ctor({ propsData: {}, slots: { default: someNod
浏览 2提问于2017-12-28得票数 3
回答已采纳
我对ReactJs完全陌生，所以我正在努力学习最佳实践。我使用的是通过visual studio创建的默认react项目，该项目具有路由设置和三个选项卡:主页、计数器和FetchData。
我在Counters类中有一些状态-当在特定页面上按需要编辑时，但是每次我导航离开然后又回来时，它都会重置为初始状态而不是更改后的状态？
有人能解释一下为什么会这样吗？它似乎在你每次点击一个标签时都会点击render方法，我猜这意味着它每次都会创建一个新的实例，而不是重用。有什么办法可以绕过这个问题吗？
另外，我还试图将一些状态信息传递给counters类，这在路由中是否可行？
export class L
浏览 0提问于2018-07-31得票数 0
1回答
我已经创建了一个名为correct_answer的测试应用程序，它可以跟踪州内的正确答案。问题是，当用户离开一个测试并转到下一个测试时，测试答案仍然存储在最后一个测试中。
我尝试过使用LOCATION_CHANGE从react路由器-redux，但我不确定我是否正确地使用它。
import { LOCATION_CHANGE } from "react-router-redux";
const initialState = {
questions: [],
answers: [],
correct_answer: []
浏览 1提问于2019-09-04得票数 1
回答已采纳
我有一个react组件，它接收来自它的父级App.js的道具。这是正确的。我可以console.log()这个：
componentWillReceiveProps(props) {
console.log(props);
this.getPosts()
}
console.log()在这里正确地显示了道具：
{pageNumber: 2, loggedIn: true}
但是，在我的getPosts()方法中，我从this.props读取
getPosts() {
console.log("in post list and page is" + this.prop
浏览 6提问于2017-09-26得票数 0
回答已采纳
VUE组件(以及应用程序本身)有一个el:和一个template。
我想知道区别是什么，什么时候使用其中一种，什么时候使用另一种：
如果我使用Monaca从最小的VUE-OnsenUI模板创建一个项目，我会看到：
new Vue({
el: '#app',
template: '<app></app>',
components: { App }
});
从缺乏示例的非常详细的文档中可以看出，长话短说，template dom元素及其中的所有内容都将取代el dom元素。(模板只能有一个根，对吗？)例如:如果我的html是：
&
浏览 2提问于2017-10-06得票数 15
回答已采纳
我在地图上添加了一组标记，使用的是反应传单。目前，我可以用自定义图标在地图上显示标记。如何向每个标记添加数据记录。我想我必须以某种方式创建一个自定义标记类？现在有没有人能给每个标记添加一个数据记录，或者至少一个索引。
这是目前为止的代码：
import React, { Component } from 'react';
import { Map, TileLayer, Marker } from 'react-leaflet';
import {Navbar, Nav, NavDropdown} from 'react-bootstrap'
浏览 0提问于2019-12-03得票数 1
回答已采纳
1回答
当UI事件发生时，我的顶级React组件接收来自外部对象的数据作为道具使用。我想知道更新组件的道具以用于下一次渲染的正确方法。
似乎其中一个组件生命周期方法应该处理这个问题，但情况似乎并非如此。
下面的代码显示了我尝试过的内容：
·一旦数据准备就绪，Root.update**:**自定义方法就会被外部调用。这两种技术都能发挥作用。
·Root.getDefaultProps**:**用于检索道具以进行第一次渲染。
·Root.render**:**也能工作，但在第一次渲染时是多余的。
·Root.componentWillUpdate**:**不起作用，但似乎应该起作用。
·Root.comp
浏览 0提问于2015-07-20得票数 1
回答已采纳
4回答
如何有条件地使用一种样式的组件？
我有一个接受道具的基本组件，但它似乎不起作用(可能是一些非常愚蠢的东西)：
import React from 'react';
import styled from 'styled-components';
const Header = styled.h1`
color: ${props => (props.name === 'john' ? 'red' : 'blue')};
`;
export default ({ name }) => <Heade
浏览 1提问于2018-05-06得票数 3
回答已采纳
有时，我在useCallback中声明一个咖喱函数时使用这种模式。
const Child = ({ handleClick }) => {
return (
<>
<button onClick={handleClick("foo")}>foo</button>
<button onClick={handleClick("lorem")}>lorem</button>
</>
);
};
export default function
浏览 2提问于2021-09-11得票数 5
回答已采纳
我想创建一个完全由其状态控制的组件Person。它还应该能够同步从其父组件传递到状态的属性更改(firstName，lastName)。我有以下代码。它做了我想要的，那就是同步道具到状态，并在状态改变后重新渲染。
然而，我注意到的一个问题是，useEffect在由父属性更改触发的DOM更新之后被调用。因此，最初的重新渲染是浪费的，因为我只想在调用useEffect并更改状态后重新渲染它。
import React,{useState, useEffect} from 'react';
const Person = ({firstName, lastName}) =>
浏览 0提问于2020-04-30得票数 2
我有一个具有select输入的父组件，它通过v模型绑定到数据中的一个变量。
此外，我使用Vue.extend动态创建子组件，传递propsData，其中还包括select的值。
此组件具有与select输入相关的支柱的监视程序。
当我创建组件时，它成功地接收到道具，当我更新没有触发子组件上的观察者的select输入的值时，问题就出现了。
我一直在寻找类似的情况，但还没有找到一些可以帮助我解决这个问题的东西，我不知道为什么当选择输入发生变化时，它不会触发子组件上的观察者。
任何帮助都是非常精确的。
在这里，我动态地创建组件：
let PresupuestoFormularioVue = Vue.
浏览 3提问于2022-02-06得票数 1
4回答
我有以下带有插槽的组件：
<template>
<div>
<h2>{{ someProp }}</h2>
<slot></slot>
</div>
</template>
出于某些原因，我必须手动实例化这个组件。我就是这样做的：
const Constr = Vue.extend(MyComponent);
const instance = new Constr({
propsData: { someProp: 'My Heading
浏览 2提问于2018-05-03得票数 20
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
