Question

苏人！

我在这里得到了这个HTML代码：

// index.html
<div data-init="component-one">
  <...>

 <div data-init="component-two">
   <button @click="doSomething($event)">
 </div>
</div>

如果我正确理解了一切，这基本上引用了另一个Vue实例中的Vue实例。相应的JS代码分为两个文件，如下所示：

// componentOne.js
new Vue(
  el: '[data-init="component-one"]',
  data: {...},
  methods: {...}
);


// componentTwo.js
new Vue(
  el: '[data-init="component-two"]'
  data: {...}
  methods: {
    doSomething: function(event) {...}
  }
);

现在，问题是，来自doSomething的{{1}}永远不会被调用。

但是当我做一些内联的东西，比如componentTwo时，它会像它应该的那样进行计算。所以Vue知道有什么东西。它还会删除页面加载时的{{ 3 + 3 }}元素。

我也试图摆弄@click，但它并没有像我期望的那样在这种情况下发挥作用。而且我认为它不适用于这种情况，所以我再次放弃它。

这里的正确做法是什么？我怎样才能以最简单的方式使这项工作成为现在的设置？

我们使用的Vue版本是inline-template。

干杯！

Answer 1

问题是你有两个相互嵌套的vue实例。如果元素是嵌套的，那么您应该使用相同的实例或尝试components

https://jsfiddle.net/p16y2g16/1/

 // componentTwo.js
var item = Vue.component('item',({
name:'item',
 template:'<button @click="doSomething($event)">{{ message2 }}        </button>',
 data: function(){
   return{ 
  message2: 'ddddddddddd!'
}},
methods: {
doSomething: function(event) {alert('s')}
}
 }));
  var app = new Vue({
    el: '[data-init="component-one"]',
   data: {
 message: 'Hello Vue!'
    }
   });

   <div data-init="component-one">
  <button >{{ message }}</button>

    <item></item>

    </div>

如果sepatate实例彼此独立，则它们可以正常工作。

如下：

https://jsfiddle.net/p16y2g16/

 var app = new Vue({
 el: '[data-init="component-one"]',
 data: {
  message: 'Hello Vue!'
  }
});


 // componentTwo.js
 var ddd = new Vue({
  el: '[data-init="component-two"]',
   data: {
     message: 'ddddddddddd!'
},
 methods: {
   doSomething: function(event) {alert('s')}
 } 
});

Answer 2

但是当我做一些内联的东西，比如{{3 + 3}}时，它会像它应该的那样计算。所以Vue知道有一些东西。

因为你有父实例＆＃39; componentOne＆＃39;。它为此模板激活了Vue。如果需要在内部设置另一个实例，则必须分离模板的一部分。示例（它可能滞后于片段！）。备选

https://jsfiddle.net/qh8a8ebg/2/

＆＃13;

// componentOne.js
new Vue({
  el: '[data-init="component-one"]',
  data: {
  	text: 'first'
  },
  methods: {}
});


// componentTwo.js
new Vue({
  el: '[data-init="component-two"]',
  data: {
  	text: 'second'
  },
  template: `<button @click="doSomething($event)">{{text}}</button>`,
  methods: {
    doSomething: function(event) {
    	console.log(event);
    }
  }
});

＆＃13;

<script src="https://vuejs.org/js/vue.min.js"></script>
<div data-init="component-one">
{{text}}
</div>
 <div data-init="component-two">
 </div>

＆＃13;

Answer 3

<div th:if="${msg.replyFloor}">
    <div class="msg-lists-item-left">
        <span class="msg-left-edit"
              th:classappend=" ${msg.unreadCount == 0} ? 'msg-all-read' ">您在</span>
        <span th:text="${msg.topic.title}"
              class="msg-left-edit-res"
              th:classappend=" ${msg.unreadCount == 0} ? 'msg-all-read' ">问题回答</span>
        <span th:text="${msg.type.name}"
              class="msg-left-edit "
              th:classappend=" ${msg.unreadCount == 0} ? 'msg-all-read' ">帖子相关</span>
        <span class="msg-left-edit-number" >
            产生了<span th:text="${msg.unreadCount} ? : ${msg.unreadCount} + '条新' : ${msg.unreadCount} + '条' "
                       th:class="${msg.unreadCount} ? : 'number-inner':''">2132条</span>回复
        </span>
    </div>
    <div class="msg-lists-item-right">
        <span th:text="${msg.lastShowTime}">2017-8-10</span>
    </div>
</div>

Answer 4

组件二中的按钮元素在Vue中被引用为一个插槽。 @click指令值的评估发生在父组件（组件一，主机组件二）中。因此，您需要在那里声明点击处理程序（在组件一上）。

如果希望在第二组内部处理处理程序，则应该为其中的slot元素（第二组件）模板声明一个click指令，并传递处理函数，例如，流行。

祝你好运。

Answer 5

使用vue-cli创建一个webpack入门应用。 vue init app --webpack

然后，尝试以这种方式构建组件。阅读更多：https://vuejs.org/v2/guide/components.html#What-are-Components

这是main.js

import Vue from 'vue'
import ComponentOne from './ComponentOne.vue'
import ComponentTwo from './ComponentTwo.vue'

new Vue({
  el: '#app',
  template: '<App/>',
  components: { 
    ComponentOne,
    ComponentTwo
  }
})

这是ComponentOne.vue

<template>
  <div class="user">
    <div v-for="user in users">
      <p>Username: {{ user.username }}</p>
    </div>
  </div>
</template>


<script>
export default {
  data () {
    return {
      users: [
        {username: 'Bryan'},
        {username: 'Gwen'},
        {username: 'Gabriel'}
      ]
    }
  }
}
</script>

这是ComponentTwo.vue

<template>
  <div class="two">
    Hello World
  </div>
</template>


<script>
export default {

}
</script>

Vue实例中的Vue实例

5 个答案: