Vue.js 将道具组件传递给根实例

我是vuejs的超级新手。我不知道如何将道具组件传递给根实例 这是我的密码

组件（Tesvue.vue）

刃锉

<div class="" id="app">
  <tesvue name="{{$model->name}}"></tesvue>
</div>

场景是，im将数据从laravel控制器提取到blade元素，然后vue js可以访问它。这类似于将php变量传递给vuejs。 我知道这可以通过Php vars to javascript插件实现，也可以直接内联使用。这样地 var name={{name}

但我想用vuejs的方式（道具）做到这一点

所以，如何将道具数据传递给根实例。“getname”如何获得道具“name”

---

谢谢，对不起，我的英语不好。

组件不能直接将数据传递回其父级。这只能通过事件实现。因此，要使其正常工作，您必须在子组件准备就绪后立即从其发出事件，并且必须侦听该事件。你的情况是这样的：

<div id="app" 
data-name="dataname" 
data-another="anotherdata" 
data-anything-else="anydata">

export default {
  // ...
  props: ['name', 'another', 'anythingElse'],
  // ...
};

组件（Tesvue.vue）

刃锉

<div class="" id="app">
    <tesvue name="{{$model->name}}" @setname="changeName"></tesvue>

    <!-- getname got set through changeName event -->
    <span v-text="getname"></span>
</div>

我找到了解决方案

<template>
  <label class="col-md-2 control-label">{{name}}</label>
</template>

<script>
export default {
  props: ['name'],
  mounted: function() {
    this.$root.getname = this.name;
  }
}
</script>

{{name}}
导出默认值{
道具：['name']，
挂载：函数（）{
this.$root.getname=this.name；
}
}

看看这个

---

但非常感谢@Reduxxx回答我的新手问题。

这里有一个使用数据集的不错的解决方案：

HTML:

请参阅文档中的更多信息

---

如果你想同时使用多个数据集，你可以使用如下的扩展操作符分配一个对象：（如果你使用的是Babel并且有插件）

或者，如果您没有使用Babel:（）

因此，如果您在html中定义了多个数据集，如下所示：

<div id="app" 
data-name="dataname" 
data-another="anotherdata" 
data-anything-else="anydata">

export default {
  // ...
  props: ['name', 'another', 'anythingElse'],
  // ...
};

有一些方法可以将数据从子级传递到父级。最好和可接受的方法是使用Vuex存储并发出事件

如果要从子级发出事件，可以调用方法来执行此操作：

然后，您可以在已导入组件的父组件中侦听此事件

或者，如果您想使用Vuex，则可以在存储状态中创建一个属性，还可以使用getter从state获取该属性，并使用变异来更改位于state的属性的值

然后在父组件中使用getter获取状态中的属性，在子组件中提交一个变种（如果您在整个过程中包含操作，这将非常好）来更改状态中的属性

---

使用商店，我的朋友。它看起来像什么？这是Vuex吗？是的，这是Vuex，简单地说，当您使用存储时，您的数据将在Vue实例中的任何位置可用。好的，我将学习它。谢谢我朋友的推荐信我很高兴能帮上忙。顺便说一句，如果你发现自己需要一些vue插件，我已经开发了一些你可以使用的开源repo。只是看看我的感谢和好运。是的，它很有效，但是。。。这是基于组件的spa的反模式。我认为更好的解决方案是向儿童公开setter方法。所以根组件“知道”有人会设置它，根组件决定谁可以设置；）更好的办法是使用store（vuex）来集中这些数据。是的，在我在youtube上看到vuex之后。也许vuex将是最好的解决方案。谢谢

<div id="app" data-name="dataname">

<template>
  <label class="col-md-2 control-label">{{name}}</label>
</template>

const root_element = document.getElementById('app');

new Vue({
    el: root_element,
    propsData: { name: root_element.dataset.name }
});

const root_element = document.getElementById('app');

new Vue({
    el: root_element,
    propsData: { ...root_element.dataset }
});

propsData: Object.assign({},root_element.dataset)

<div id="app" 
data-name="dataname" 
data-another="anotherdata" 
data-anything-else="anydata">

export default {
  // ...
  props: ['name', 'another', 'anythingElse'],
  // ...
};

callThisMethod () {
  this.$emit('nameOfEventYouWantToListen', dataToPass)
}

<ImportedComponent @nameOfEventYouWantToListen="callFunctionInParentHere" />