Изменение данных компонентов в vuejs - PullRequest
Новая
       0

Изменение данных компонентов в vuejs

0 голосов
/ 01 ноября 2018

У меня есть базовая примерная настройка компонента, которая привязана к экземпляру Vue, например: 

<template>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Example Component</div>

                    <div class="panel-body">
                        {{ msg }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data : function(){
            return{
                msg : "Hello"
            }
        },
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

А это мой app.js файл 

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('example-component', require('./components/ExampleComponent.vue'));

var firstComponent = new Vue({
    el: '#app'
});

Это мой HTML

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>


    </head>
    <body>

        <div id="app">
            <example-component></example-component>
        </div>

        <script src="{{ asset('js/app.js') }}"></script>
    </body>
</html>

Как теперь я могу изменить значение msg? У меня нет нигде ссылки на этот компонент? Как я могу это сделать?

Возможно ли это? 

var ex = Vue.component('example-component', require('./components/ExampleComponent.vue'));
ex.data = "new Value";

Ответы [ 3 ]

0 голосов
/ 01 ноября 2018

TL; DR Посмотрите на этот пример, он делает то, что вы хотите: https://codesandbox.io/s/88ojwpjq88

Необходимо различать data (личные данные компонентов) и props (данные, передаваемые дочернему компоненту). Прочитайте этот раздел руководства Vue.js: https://vuejs.org/v2/guide/components.html

В вашем компоненте вам нужно объявить опору: 

export default {
    props : ['msg'],
    mounted() {
        console.log('Component mounted.')
    }
}

Затем вы можете привязать данные к дочернему компоненту следующим образом: <example-component :msg="myMessage"></example-component> при условии, что родительский компонент имеет myMessage, объявленный так: 

data : function(){
   return {
    myMessage : "Hello"
  }
}

Чтобы изменить значение, вы можете привязать его к какому-либо вводу. Вот пример с текстовым полем: <input v-model="myMessage">.

Если вы введете sth. в этом поле вы должны увидеть значение привязки в обновлении компонента.

Прочтите руководство здесь: https://vuejs.org/v2/guide/index.html. Это действительно хорошо, ваши вопросы полностью рассмотрены там.

0 голосов
/ 01 ноября 2018

Добавьте свойство к вашему компоненту, сделайте его родительским, то есть вы свяжете свойство в компоненте и сможете передавать данные этому свойству. В зависимости от потока вы должны определить, как вы будете это делать, будь то от отца к сыну или от ребенка к отцу. Чтобы передать данные дочернему элементу, вы проходите через реквизиты. Если вы переходите от дочернего к родительскому, вы используете $ emit. https://vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props

Если вы используете родителя для ребенка, вы будете делать это следующим образом. Pai.vue 

<template>
  <div> {{msg}} </div>
</template>
<script>
export default {
 props: {
  msg: {
  type: String,
  default: 'Hello'
  }
 }
}
</script>

Ai Внутри дочернего компонента вы вызываете параметр 

<template>
 <div>
  <parent :msg="valueMsg"/>
 </div>
</template>

введите код здесь

son.vue 

<script>
import pai from './pai'
export default {components: {parent},
 data: () => ({
  valueMsg = 'Hello Test'
  })
}

https://jsfiddle.net/hamiltongabriel/3zr8jb7r/

0 голосов
/ 01 ноября 2018

добавьте свойство props к вашему компоненту и установите внутри него свойство msg: 

<script>
export default {
     props:{
         msg:{
            type:String,
            default:"Hello"
          }
       },
    data : function(){

    },
    mounted() {
        console.log('Component mounted.')
    }
  }
</script>

и 

 <example-component msg="new Hello"></example-component>

UPDATE

после понимания вашего варианта использования я рекомендую использовать child component ref

const ExampleComponent = Vue.component('example-component', {
  template: `
    <div>
      <h2>Example component</h2>
      <div>{{msg}}</div>
    </div>
  `,
  data() {
    return {
      msg: "Hello"
    }
  }
});

window.root = new Vue({
  el: '#app',
  components: {
    ExampleComponent
  }
});

root.$refs.example.msg = "new hello"
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>

</head>

<body>

  <div id="app">
    <h2>Parent</h2>

    <example-component ref="example"></example-component>
  </div>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...