将道具组件传递给根实例

问题描述

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

组件(Tesvue.vue)

<label class="col-md-2 control-label">{{name}}</label></模板><脚本>导出默认{道具:['名字']}

根 (app.js)

window.Vue = require('vue');从 './components/Tesvue.vue' 导入 tesvue；var vm = new Vue({el: '#app',成分: {特斯威},数据:{获取名称:''}});

刀片文件

<tesvue name="{{$model->name}}"></tesvue>

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

但我想以 vuejs 的方式(道具)做到这一点.

那么如何将 props 数据传递给 root 实例.'getname' 如何获得道具 'name'谢谢，抱歉我的英语不好.

解决方案

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

HTML:

组件(Testvue.vue):

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

根实例(App.js)

const root_element = document.getElementById('app');新的 Vue({el:root_element，propsData: { 名称: root_element.dataset.name }});

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

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

const root_element = document.getElementById('app');新的 Vue({el:root_element，propsData: { ...root_element.dataset }});

或者，如果您还没有使用过 Babel，只需使用 ES6 方法:(Object.assign())

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

因此，如果您像这样在 html 中定义了多个数据集:

你可以这样暴露道具:

出口默认{//...道具:['name', 'another', 'anythingElse'],//...};

I'm super newbie in vuejs. I don't know how to pass props component to root instanceHere is my code.

component (Tesvue.vue)

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

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

Root (app.js)

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

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

blade file

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

The scenario is, im fetching data from laravel controller to blade element, then vue js can access it. This is like pass php variable to vuejs.I know this can be done with Php-vars-to-javascript plugin, or i can simply use it inline. like thisvar name = {{name}}

but i want do that in vuejs way (props).

So how to pass props data to root instance. How 'getname' can get props 'name'Thanks, sorry my bad english.

解决方案

Here's nice solution using dataset:

HTML:

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

Component (Testvue.vue):

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

Root Instance (App.js)

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

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

See more about propsData in the docs.

---

If you want to use multiple dataset at once, you can assign an object using spread operator like this: (if you're using Babel and have the object-rest-spread plugin)

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

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

Or, simply use ES6 method if you have not used Babel: (Object.assign())

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

So, if you have defined multiple dataset in your html like this:

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

You can expose props like this:

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

这篇关于将道具组件传递给根实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！