SVG子组件在嵌套Vue.js下不起作用
可能是由于以下原因导致的：
- Vue.js对SVG的处理：Vue.js对SVG的支持相对较弱，特别是在嵌套组件中使用SVG时可能会出现一些问题。Vue.js更擅长处理DOM元素而不是SVG元素，因此可能会导致一些功能不正常或无法正常渲染。
- SVG的命名空间：SVG元素有自己的命名空间，而Vue.js默认处理的是HTML元素的命名空间。因此，当使用SVG时，需要确保在组件中正确地声明SVG的命名空间，以便Vue.js能够正确地解析和渲染SVG元素。
为了解决SVG子组件在嵌套Vue.js下不起作用的问题，可以尝试以下方法：
- 使用Vue.js的特殊指令：Vue.js提供了一些特殊指令来处理SVG，如
v-bind和v-on指令。使用这些指令可以正确地绑定SVG属性和事件。 - 手动处理SVG元素：如果Vue.js无法正确地处理SVG元素，可以尝试手动处理SVG元素。可以通过在Vue组件中直接使用JavaScript操作SVG元素，或者使用第三方的SVG库来处理SVG元素。
- 使用第三方SVG组件库：如果手动处理SVG元素比较复杂，可以考虑使用第三方的SVG组件库。这些组件库通常会提供封装好的SVG组件，可以直接在Vue组件中使用，并且处理了SVG的一些兼容性问题。
总结： 尽管SVG子组件在嵌套Vue.js下可能会遇到一些问题，但可以通过使用Vue.js特殊指令、手动处理SVG元素或使用第三方SVG组件库来解决。这样可以确保SVG在Vue.js应用中正常工作，并实现所需的功能。
相关·内容
1回答
我有一个多年前用意大利面条jQuery代码构建的旧项目，我想更新它以使用JS框架(主要是出于常见的原因:更好的可伸缩性，更好的状态管理，更干净/更可维护的代码，等等)。我发现Vue.js特别吸引人。
该项目允许用户从服务器上的目录中动态地将大量选择的.svg文件加载到DOM中，然后与它们交互(主要是单击更改单个路径元素的填充/线条颜色，由jQuery和处理)。
经过一些研究和实验，我还没有找到使用Vue实现这一点的简单方法--据我所知，我需要手动编辑每个.svg文件，以便将(许多)绑定放在适当的位置，从而允许.svg的离散部分具有交互性。由于大量的文件和快速添加新文件的需要，这是一个破坏交易的
浏览 75提问于2018-10-18得票数 2
回答已采纳
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
回答已采纳
1回答
我有一个导航栏(可能还有一个页脚)，它应该在每个嵌套页面上都可见。所以基本上只是内容发生了变化。在Vue.js中，我只需要使用<router-view>作为动态内容的占位符，使用<router-link>来切换此内容。 现在，在Nuxt.js中，我有以下目录结构。 pages/
--| calendar/
-----| index.vue
--| people/
-----| index.vue
--| index.vue 我的导航栏由两个<nuxt-link>组成，例如<nuxt-link :to="/calendar"> (
浏览 38提问于2020-08-03得票数 0
在Vue.js中，React中是否有类似createContext的东西？https://flaviocopes.com/react-context-api/ 我找到了这个https://github.com/zephraph/vue-context-api，但我更喜欢使用更“官方”的东西
浏览 146提问于2020-09-15得票数 4
回答已采纳
我是vue.js的新手，我遇到过子组件，我知道数据是在父组件中呈现的，而不是在子组件中呈现的，而且当需要传递数据/props时，子组件更灵活。我遗漏了什么基本的或关键的原因吗？
浏览 3提问于2020-08-13得票数 2
1回答
我有一个主页，这是第一次呈现，主页有一个链接到邮编页。我的目标是从主页路由到邮政编码页面。由于某种原因，当我单击链接时，邮政编码页面中的代码不会呈现，但是url将更改为/Postcode。我在下面的代码上使用了嵌套的路由技术，但是当我没有将邮政编码路由作为第一条路由的子路由时，它就能正常工作。那么，当第二条路由是第一条路由的嵌套路由时，为什么它不起作用呢？
App.js代码：
import logo from './logo.svg';
import './App.css';
import { Mainpage } from './component
浏览 4提问于2022-03-13得票数 0
我是Vue.JS的新手，需要一点帮助，因为我被一些逻辑所困住了。我已经得到了一个项目的建设，因为我在保密协议下，我只能显示比较代码的例子。
在使用路由器进入应用程序视区的one View (Bars)中，我有一个简单的for循环。
<ul class="bar-listings">
<li v-for="bar in bars">
<router-link to="{bar.barPage}">
<div class="item">
浏览 0提问于2019-04-04得票数 0
我不知道在哪些情况下应该取消订阅route.params的可观察性。
角质文档说我们不需要取消订阅。
那么我应该取消订阅的用例是什么呢？
浏览 0提问于2018-08-13得票数 2
回答已采纳
1回答
在vue.js中，在不改变父数据的情况下编辑支柱的正确方法是什么？我的意思是，每当我们在vue.js中将任何属性从父组件传递到子组件时，如果我们在子组件中对该属性进行任何更改，那么更改也会反映在父组件中。
在vue.js中有任何方法可以在子节点中复制传递的属性吗？
我在googled上搜索了一下，但是无论在哪里，我们都可以通过这样做来实现这一点。
props:["user"],
data(){
return {
localUser: Object.assign({}, this.user)
}
}
在这里，用户被传递了一个对象，我在本地用户
浏览 0提问于2018-09-22得票数 19
回答已采纳
在我的Vue.js项目中，我有许多组件，在其中的一些组件中，这些组件都将使用一个已获取的数据列表，称为server_list。
我不想在使用它的每个组件中获取它。
那么，我该如何优化它呢？
只在一个地方取吗？
例如，在component_foo中，我将调用fetch_server_list()，在component_bar中，我也将调用fetch_server_list()。
如何多地处理拉取服务器列表数据？
你处理这个问题的最好方法是什么？
浏览 0提问于2018-06-01得票数 0
1回答
我在Vue.js模板中有一个SVG图，里面嵌套了象征门的圆圈。当门打开时，描边/填充颜色应为绿色；&当门关闭时，描边/填充颜色应为红色。当我的R/T数据到达时(即发送到SignalR客户端插件)。我需要设置状态并计算颜色，这是我正在做的，但是颜色没有被重新绘制。有什么建议吗？我使用的是Vue.js 2.9.6。谢谢 我已经尝试了计算属性以及手表。data()字段正在更新，但绑定的颜色没有反应。 在模板中 <div class="VcSchematicAccessControlRedundantImg" >
浏览 9提问于2019-06-20得票数 0
我已经通过了相关的线程链接，但没有解决我的问题，我理解这个问题是当我试图用对象来设置状态时，而不是使用数组。
我有一个siteProductTestContainer.js
import React from "react";
import api from "../networking/api";
import ProductList from "./components/ProductList";
class siteProductTestContainer extends React.Component {
state = {
浏览 0提问于2018-04-13得票数 0
回答已采纳
我们已经开发了呈现svg数据的Blazor组件。组件与.NET核心库(自定义dll)具有依赖关系。是否可以在角或Vue.js项目中加载/集成组件？
浏览 0提问于2020-11-10得票数 1
我喜欢在我的项目中使用inline svg，因为使用css和js(道具)可以很好地控制宽度、高度、填充颜色、笔画宽度和笔画颜色。我通常为每个SVG图标创建一个vue.js证监会()。下面是一个例子：
<!-- IconsArrowRight.vue -->
<template>
<svg
viewBox="0 0 14 14"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d
浏览 5提问于2022-04-10得票数 1
回答已采纳
我需要将数据从子组件发送到其父组件(通过发出)，一旦子组件被加载，而不调用任何事件，如click或keyUp，...
换句话说，我希望在挂载子组件后，它会自动向父组件发送一些数据，而不必调用事件来发出数据。
在vue.js中有什么方法可以做到这一点吗？
我会提前谢谢你的
浏览 1提问于2021-04-29得票数 0
2回答
我有一个这样的问题，在重新加载页面后发生错误。“呈现函数或模板没有在组件中定义:匿名”。我认为这个错误是由于socket.io造成的。此错误不会发生在本地计算机上，而会出现在生产计算机上，原因是什么？dev версия error server.js const APP_ENV = require('./.env.js')
const { Nuxt, Builder } = require('nuxt')
const app = require('express')()
let server = require('http'
浏览 65提问于2019-01-24得票数 5
回答已采纳
我正在学习Vue.js。目前，我正在努力理解事件发生。在Vue，有。除self修饰符外，我理解所有这些修饰符的用途。self修饰符是什么？stop修饰符似乎与self做了同样的事情。我什么时候会使用self
谢谢你的帮助。我觉得我一定是误会了。我只是不明白self的目的。
浏览 2提问于2017-03-13得票数 5
回答已采纳
1回答
我最近一直在学习Vue.js，并且很难理解的概念。
根据我从文档示例中了解到的情况，子组件只能在父组件内部工作。
<parent-component>
<my-component></my-component>
</parent-component>
然而，我无法达到这一结果。有人能告诉我我哪里出错了吗？
这是让你玩。
浏览 4提问于2016-02-01得票数 0
回答已采纳
1回答
当我导入一个SVG并将它作为道具和console.log传递到另一个组件时，我会得到编号。由于这一点，我遇到了一些问题，因为react-native-svg-uri要求我将SVG作为其svgXmlData属性的字符串导入。
父组件
import SVGICON from './icon.svg';
const ParentComponent = () => {
console.log(SVGICON); // this outputs numbers
return (
<ChildComponent
icon={SVGICON}
浏览 0提问于2019-07-22得票数 0
我正在使用vue.js和vuetify。 由父元素生成的元素存在于我的代码中。 我希望根据父类的子类动态地更改父元素的类，就像jQuery has()方法一样。 vue.js有什么办法做到这一点吗？ jQuery has()
浏览 40提问于2020-09-03得票数 0
回答已采纳
我正在处理一个Vue.js项目，在父组件完成后，我需要在子组件中执行一些逻辑。特别是，子组件向父组件发出一个事件以保存某些数据。在此之后，父组件必须与子组件通信，并使其执行某些逻辑(在本例中为清除自己的状态)。
<template>
<div>
<child-component @save="saveData">
</div>
</template>
<script>
export default {
methods: {
saveData(event
浏览 3提问于2021-04-17得票数 0
回答已采纳
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
回答已采纳
2回答
顺便说一句，在文档中，vue.js中的属性是单向绑定的：
请注意，JavaScript中的对象和数组是通过引用传递的，因此如果属性是数组或对象，则在子级中改变对象或数组本身将影响父状态。
所以我想知道，prop.sync是只用于"litteral“(即字符串、数字、日期)，还是必须与对象/数组一起使用？
我已经使用对象没有同步，所有的工作都很好，但我担心这不是做"vue.js“方式的好解决方案？
所以我的问题是:我可以在prop中使用对象/数组吗，没有同步，没有问题？
浏览 1提问于2018-01-28得票数 0
1回答
我想问您，在VUE.JS组件'A‘中，是否有可能调用另一个使用组件'A’的VUE.JS组件'B‘的方法。
谢谢
浏览 5提问于2020-10-09得票数 0
回答已采纳
1回答
我使用vue.js来设计一个管理应用程序，并且我试图构建尽可能模块化的UI体系结构。因此，我已经将Header、Body、Sidebar和Main设置为单个文件组件，如下所示。
树
App
- Header
- dynamic content
- Body
- Sidebar
- dynamic content
- Main
- dynamic content
图形
┌──────────────────────────────────────────────────────────┐
│ HEADER SO
浏览 3提问于2018-05-28得票数 1
回答已采纳
我认为这个问题源于父模板在带有Vue Router 4的Vue.js 3中有多个子模板。在这两个包的先前版本中，我从未遇到过这个问题。 我有一个简单的App.vue文件： router-link to="/information"链接工作正常。它只是加载其中没有其他组件的视图。 另一个router-link :to="{ path：'/create'，name：'PostCreate'}"在重复尝试加载组件约50次后失败，并在控制台中记录以下内容： vuerouter.js Information.vue和PostCreate.
浏览 1995提问于2021-02-27得票数 4
回答已采纳
1回答
使用组件作为按钮进行响应
、、、
我在我的React应用程序中有按钮，我想使用SVG将图像添加到它们中，正如我发现的那样，我需要一个单独的组件来处理我的SVG文件，所以我遵循了这个，并使自己成为一个<SVGIcon />组件。
我尝试将它添加到一个button中，但它似乎不起作用。我尝试将它作为按钮使用，方法是将onClick添加到<SVGIcon />中，但随后该按钮就消失了。
如何使用SVG组件但保留按钮属性？
<SVGIcon name="list " width={100}/>
<Button onClick={() => this.playPrevio
浏览 1提问于2019-03-14得票数 2
回答已采纳
(新加入ReactNative)
我目前有一个，它有一个具有以下(粗糙)结构的组件：
<View>
<View>
<TextInput />
<Text />
</View>
<View>
<Image />
<Button />
</View>
</View>
因此，在父视图中，让我们调用View1和View2。我可以很容易地将父视图替换为
浏览 2提问于2019-11-24得票数 0
在某些情况下，我可以将数据绑定到父元素(比如<svg>容器)，然后附加子<path>元素，然后用数据更新它们的d属性。其他时候，我似乎做不到这一点。
例如，在我的代码中，我有
var svg = d3.select(this).selectAll("svg").data([allSeries]);
其中allSeries是我的三个时间序列数据的三元素数组。然后，我为每个元素添加一个path。
var gEnter = svg.enter().append("svg").append("g");
for (var i = a
浏览 0提问于2013-02-04得票数 1
回答已采纳
我认为Vue.js中的父组件和子组件之间的双向数据流不仅是不鼓励的，而且是不可能的。然而，我发现实际上可以使用自定义类作为工具。
自定义类：
class MyClass {
constructor(val) {
this.val = val;
}
}
父模板：
<div>
<child :obj="obj"></child>
</div>
儿童道具：
props: {
obj: MyClass
}
子模板：
<div>
<button @cli
浏览 3提问于2020-09-16得票数 0
回答已采纳
我用Webpack和Vue.js连用。在map.svg文件中，我以如下形式存储所有SVG图标：
<symbol id="someID"><path></symbol>
<symbol id="otherID"><path></symbol>
在代码中，我使用了一个类似于SVG4Everybody-plugin的构造：
<svg><use xlink:href="map.svg#someID"></svg>
但这不起作用，因为Webpack不
浏览 0提问于2017-12-06得票数 2
回答已采纳
1回答
我正在使用SVG，并且有点混淆了SVG元素本身的x和y属性。他们似乎不起作用。这是代码
$(document).ready(function(){
console.log("Ready");
var svg = d3.select('#container')
.append('svg')
.attr({
x: 0,
y: 0,
width: 200,
height: 100
});
svg.append('circle
浏览 2提问于2015-12-12得票数 1
回答已采纳
1回答
如何正确创建嵌套路由？
const CarTable = { template: '<div>Car List</div>' }
const CarShow = { template: '<div>Car Show</div>' }
const CarCreate = { template: '<div>Car Create</div>'}
const router = new VueRouter({
routes: [
{path: '/car&
浏览 2提问于2021-02-12得票数 0
回答已采纳
Vue.js新手，尝试使用eventBus在不同的同级组件中发出事件。
这是我想要发生的交互。1.单击卡片组件上的删除按钮。2.弹出一个模式，要求确认删除。3.用户点击界面中的[确定]按钮，确认删除。4.该点击向卡片组件发出事件，该事件触发其删除方法，最终将其删除。
我的代码一直到第三步都没问题，然后就死机了。
我一直在尝试使用eventBus，但我不确定我做错了什么。下面是我从步骤3开始的代码。
props: {
jobs: { type: Array, default: null }
},
created(){
bus.$on('confirmGigDelete
浏览 0提问于2020-06-16得票数 0
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
回答已采纳
在vue.js route.js中
[{path: "/path", name: "acomp_name", component: PathComp, props: { abc: {} }}]
comp.vue
<script>
...omitted_for_brevity,
methods: {
changeRoute(json_sample){
this.$router.push({name: "acomp_name", params: { abc: json_sample })
}
}
</script&
浏览 9提问于2021-09-17得票数 0
回答已采纳
2回答
我正在做一个vue.js项目(第3版)。我遇到这样一种情况:我希望将组件的呈现HTML视图用于当前组件的方法。
我在Vue项目中创建了以下SVG组件。
CircleWithTextSvg.vue
<template>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="shape-rendering:geometricPrecision; tex
浏览 61提问于2021-07-09得票数 2
4回答
我是vue.js的新手，并且习惯了React。我目前正在尝试将SVG徽标导入到我的标题组件中，但我不确定如何导入。在react中，我只需在当前组件中的任何需要时执行import Logo from './path;并使用Logo。这基本上就是我现在想要做的，但我一直在犯错误。有人能告诉我如何在Vue.js中做到这一点吗？
<template>
<header class="nav">
<img src={Logo} alt="24G Logo">
</header>
<
浏览 6提问于2020-05-22得票数 3
回答已采纳
我刚用变异设置了新的vuex变量。我在组件中更改了“创建”vue.js函数的变量，并且它已经工作了。我得到了这个变量的值"true“，但是当我试图在某个父组件中绑定类时，它不起作用。
父组件：
<div class="subsections" :class="{'portfolio-page': this.$store.state.portfolioPages}">
在挂载函数中，console.log显示“真”值。
SSR - INITIAL_STATE在源代码中显示的值为真。
当我在挂载函数中提交变量值时-它是添加类，但是
浏览 0提问于2019-04-17得票数 1
我正在使用一个模板在Vue.js中创建一个Vue.js。
我创建了一个侧栏组件，并将其导入到将显示侧栏的视图中。当我将侧栏添加到组件中时，我将遇到以下错误。
RangeError:最大调用堆栈大小超过Vue警告:nextTick中的错误："RangeError:最大调用堆栈大小超出“
我已经尝试过在上声明的解决方案，但是它在我这边行不通。
下面是我的Sidebar.vue的示例代码
<template>
<side-bar>
<template slot="links">
<side-bar-it
浏览 2提问于2021-07-12得票数 1
回答已采纳
我想向<ais-search-box>元素(呈现的输入字段)添加一个ref='foo'，这样如果需要，我就可以动态地将.focus放在它上面。但是如何添加ref=[..]呢？我当前的代码是：
<ais-search-box ref="foo">
<div slot="submit-icon"><i class="fas fa-search text-xl p-2 text-blue-400"></i></div>
</ais-search-box
浏览 4提问于2020-08-03得票数 1
我将我的项目依赖项从Vue CLI移到Vite。我现在必须使用Vue.js 2.7，我还不能升级到Vue.js 3。
我以前在Vue CLI中使用了vue-svg-loader，现在我正在尝试使用vite-svg-loader。看起来vite-svg-loader只支持Vue.js 3。
是否有不同的方法来导入Vite & Vue.js 2.7的SVG文件？我有很多这样的组件，我将无法用.vue组件替换它们。
在组件中导入和使用SVG文件的方式如下：
<template>
<div>
<my-icon/>
</div>
&
浏览 5提问于2022-07-07得票数 2
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
回答已采纳
我从Vue.js开始我的旅程，偶然发现了一些问题。我想用下拉菜单创建一个简单的侧边栏，并且已经得到了以下内容：
new Vue({
el: '#app',
data() {
return {
openedItems: {},
selectedSub: '',
userMenu: false,
items: [{
icon: './src/assets/img/icons/dashboard.svg',
text: 'Element
浏览 0提问于2018-03-16得票数 6
回答已采纳
实际上，我正处于Vue.js 2的学习阶段，我试图将组件复选框值附加到主Vue.js实例数据数组变量中。但是，我总是在{{ brandArray }}中得到空数组。任何帮助都将不胜感激。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, init
浏览 8提问于2017-08-27得票数 0
回答已采纳
我希望将父组件数据值中的更改传递给其子组件，每次父组件中的值发生变化时，如何在vue.js中实现它。我使用的是3个自定义组件，每次都必须反映父组件的当前值。我是vue.js的新手
浏览 0提问于2018-02-15得票数 2
回答已采纳
1回答
为什么我的嵌套子组件不渲染视图？
、、、、
下面是我的设置：
Vue 2.5.16 Vue路由器
我已经设置了一个简单的路由器视图，它在父组件中查找子组件，url结构是；
/folders/parent-uuid/child-uuid
下面是父级的一个组件：
<template lang="html">
<div>
<!-- Articles -->
<div class="flex-none w-100 mv3 gray"><p>Bookmarks({{ subFolders.contentDetails.articles.
浏览 6提问于2018-08-02得票数 0
1回答
由于某些原因，我的元素样式在使用作用域时不起作用。在检查元素时，在使用范围时不应用样式。我需要使用作用域，因为我只想在这个组件中应用样式。我正在使用nuxt.js，不知道这是否与问题有关。
不起作用：
<style scoped>
a {
color: red !important;
text-decoration: underline !important;
}
</style>
工作：
<style>
a {
color: red !important;
tex
浏览 0提问于2019-07-13得票数 2
回答已采纳
1回答
我有一个抽屉部件，有一个按钮可以打开这个抽屉。我想通过点击页面上除抽屉区域以外的任何地方来关闭抽屉。我试过这个密码。它对开启有效，但对关闭不起作用。
var Child = React.createClass({
render: function() {
return (
<div className="chatBar">
<div onClick={this.onClick} className="closeBTN">
<img src="
浏览 2提问于2016-10-27得票数 6
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
