将 Props 组件传递给根实例答案

【问题标题】：Pass Props component to root Instance将 Props 组件传递给根实例
【发布时间】：2018-03-22 15:33:31
【问题描述】：

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

组件（Tesvue.vue）

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

<script>
export default {
  props: ['name']
}
</script>

根 (app.js)

window.Vue = require('vue');
import tesvue from './components/Tesvue.vue';

var vm = new Vue({
    el: '#app',
    components: {
      tesvue
    },
    data:{
      getname: ''
    }
});

刀片文件

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

场景是，我从 laravel 控制器获取数据到刀片元素，然后 vue js 可以访问它。这就像将 php 变量传递给 vuejs。我知道这可以通过 Php-vars-to-javascript 插件来完成，或者我可以简单地内联使用它。像这样变量名称 = {{名称}}

但我想以 vuejs 方式（道具）做到这一点。

那么如何将 props 数据传递给根实例。 'getname' 如何获取道具'name' 谢谢，对不起我的英语不好。

【问题讨论】：

使用商店我的朋友。
是什么样子的？那是 Vuex 吗？
是的，它是 Vuex，简单解释一下，当您使用 store 时，您的数据将在 Vue 实例中的任何位置可用。
好的，我会学习的。感谢我朋友的参考。 :D
不用担心 :) 我很高兴能帮上忙。顺便说一句，如果你发现自己需要一些 vue 插件，我已经开发了几个你可以使用的开源 repo。只需查看我的github，谢谢，祝你好运。

标签： vue.js

【解决方案1】：

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

如果你想从子节点发出一个事件，你可以调用一个方法来做到这一点：

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

然后你可以在你已经导入组件的父组件中监听这个事件

<ImportedComponent @nameOfEventYouWantToListen="callFunctionInParentHere" />

或者，如果您想使用 Vuex，则可以在 store 状态中创建一个属性，同时也是一个从 state 中获取该属性的 getter，以及一个更改位于 state 中的属性值的突变。

然后在父组件中使用 getter 获取状态中的属性，并在子组件中提交突变（如果您在整个过程中包含操作会很棒）以更改状态中的属性。

【讨论】：

【解决方案2】：

这是使用数据集的不错解决方案：

HTML：

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

组件（Testvue.vue）：

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

根实例 (App.js)

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

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

在文档中查看有关 propsData 的更多信息。

如果你想一次使用多个数据集，你可以像这样使用扩展运算符分配一个对象：（如果你使用 Babel 并且有 object-rest-spread 插件）

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

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

或者，如果你没有使用过 Babel，直接使用 ES6 方法：(Object.assign())

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

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

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

你可以像这样暴露 props：

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

【讨论】：

【解决方案3】：

我找到了解决办法

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

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

看看这个 https://jsfiddle.net/mtL99x5t/

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

【讨论】：

是的，它可以工作，但是......它是基于组件的 spa 的反模式。我认为更好的解决方案是将 setter 方法暴露给孩子。所以根组件“知道”有人会设置它，根组件决定谁可以这样做；）
更好的办法是使用 store(vuex) 来集中数据。
是的，在我在 youtube 上看到 vuex 之后。也许 vuex 将是最好的解决方案。谢谢

【解决方案4】：

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

组件（Tesvue.vue）

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

<script>
export default {
    props: ['name'],
    mounted() {
        this.$emit('setname', this.name);
    }
}
</script>

根 (app.js)

window.Vue = require('vue');
import tesvue from './components/Tesvue.vue';

var vm = new Vue({
    el: '#app',
    components: {
        tesvue
    },
    data: {
        getname: ''
    }
    methods: {
        changeName(name) {
            this.getname = name;
        }
    }
});

刀片文件

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

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

【讨论】：