标签: vue-component

我正在使用Vue.Js v2.我想在component2-> c2method中调用component1-> c1method来提交后重新加载数据.

Vue.component('component1', {
  methods: {
    c1method: function(){
     alert('this is c1method')
    },
  }
})
Vue.component('component2', {
  methods: {
    c2method: function(){
     component('component1').c1method()//like this
    },
  }
})

我试图在单个文件组件中使用全局注册的组件(使用Vue.component)但我总是得到

vue.common.js:2611[Vue warn]: Unknown custom element: <my-component> - did you register the component correctly?

例如:

main.js:

...
Vue.component('my-component', {
    name: 'my-component',
    template: '<div>A custom component!</div>'
})
...

home.vue:

<template>
    <div>
        <my-component></my-component>
    </div>
</template>
<script>
    module.exports = {
        name: 'home'
    }
</script>

如果我在本地注册它,它可以正常工作:

<template>
    <div>
        <my-component></my-component>
    </div>
</template>
<script>
module.exports = {
    name: 'home',
    components: {
        'my-component': require('./my-component.vue')
    }
}
</script>

我有一个包含类似语句成分this.$route.fullPath,我应该怎么嘲笑的值fullPath的$route对象,如果我想测试组件？

我需要在我的项目中使用SASS或SCSS.

我使用vue-cli制作了最新版本的初学者项目.

有没有人在使用webpack在最新的初学者项目中使sass/scss工作成功？

我的HTML代码是

我还需要添加阵列格式的sez,我还需要添加多个图像,需要提供添加图像,点击它时需要根据客户需要添加图像

<form method="POST" enctype="multipart/form-data" v-on:submit.prevent="handleSubmit($event);">
  <div class="row">
    <div class="col-md-4">
      <div class="form-group label-floating">
        <label class="control-label">Name</label>
        <input type="text" class="form-control" v-model="name">
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group label-floating">
        <label class="control-label">Alias</label>
        <input type="text" class="form-control" v-model="alias">
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group label-floating">
        <label class="control-label">Sex</label>
        <select class="form-control" v-model="sex" id="level">
        <option value="Male">Male</option>
        <option value="female">Female</option>
        </select>
      </div>
    </div>
  </div>
  <div class="row" v-for="(book, index) in sez" :key="index">


    <div class="col-md-4">
      <div class="form-group label-floating">
        <label class="control-label">Date </label>
        <input type="date" class="form-control" v-model="book.date">
      </div>
    </div>
    <div class="col-md-8">
      <div class="form-group label-floating">
        <label …

我在SO上回答这个问题:是否有正确的方法在vuejs中重置组件的初始数据？

但是,现在不允许使用当前方法,VueJS禁止更改$ data var.

正如您在此https://github.com/vuejs/vue/issues/2873中所见($ data不允许修改.)

所以如果我尝试上面的方法,我会得到一个VueJS警告:

[Vue警告]:避免替换实例根$ data.请改用嵌套数据属性.

这是我的JS代码,

function initialState () {
        return {
            h2: 0,
            ch4: 0,
            c2h6: 0,
            c2h4: 0,
            c2h2: 0,
            c3h8: 0,
            c3h6: 0,
            co: 0,
            co2: 0,
            o2: 0,
            n2: 0,
            selected: ''
        }
    }
    export default {
        name: 'something',
        data () {
            return initialState() // This is working fine 
        },
        computed: {
            tdcg: function () {
                // some logic here...
            }
        },
        methods: {
            resetFields: function () {
                this.$data …

我对如何更改组件内的属性感到有点困惑,假设我有以下组件:

{
    props: {
        visible: {
            type: Boolean,
            default: true
        }
    },
    methods: {
         hide() {
              this.visible = false;
         }
    }
} 

虽然它有效,但会发出以下警告:

避免直接改变道具,因为只要父组件重新渲染,该值就会被覆盖.而是根据prop的值使用数据或计算属性.Prop变异:"可见"(在组件中找到)

现在我想知道处理这个问题的最佳方法是什么,显然visible在DOM中创建组件时传入了属性:<Foo :visible="false"></Foo>

嘿,我对Vue.js很陌生,我正在努力完成一件似乎很简单的事,但我遇到了麻烦.从本质上讲,我需要它,所以每次将一个组件加载到DOM中时,其中一个方法就会触发.这是我当前的代码,我尝试使用v-on:load但它似乎不起作用.

Vue.component('graph', {
    props:['graphId','graphData'],
    template: '<canvas v-on:load="{{populateGraph()}}"></canvas>',
    methods: {
        initGraph: function () {
            var settlementBalanceBarChart = new Chart(this.graphId, {
                type: "bar",
                data: settlementBalanceBarData,
                options: settlementBalanceBarOptions
            });
        },
        //this is the function I would like to run
        populateGraph: function () {
            alert('{{graphId}}');
        }
    }

});

var vm = new Vue({
    el: "#app",
    mounted: function(){

    }

});

如果我使用v-on:click事件,相同的代码功能正常

我正在使用VueJS 2处理模态组件.现在,它基本上可以工作 - 我点击一个按钮,模态打开,等等.

我现在要做的是为模态创建一个唯一的名称,并将该按钮与该特定按钮相关联.

这就是我的想法.模态具有唯一的名称属性:

<modal name='myName'>CONTENT</modal>

这将是关联按钮:

<button @click="showModal('myName')"></button>

我需要弄清楚的是如何将showModal的参数传递给模态组件.

这是我在root vue实例中使用的方法(即,不在我的模态组件中):

methods: {
    showModal(name) { this.bus.$emit('showModal'); },
}

我想要做的是访问组件中的name属性 - 如下所示:

created() {
    this.bus.$on('showModal', () => alert(this.name));
}

但这显示为undefined.

那么我做错了什么？如何访问模态组件中的name属性？

注意:如果您想知道this.bus.$ on是什么,请参阅我之前提出的问题的以下答案:https://stackoverflow.com/a/42983494/7477670

我是vuejs的新手,我正在用vue开展我的第一个项目.我只是想知道如果找不到请求的URL,我将如何路由到我的404.vue组件.

任何的想法？