在 vuejs 中更改组件数据答案

【问题标题】：Changing Components data in vuejs在 vuejs 中更改组件数据
【发布时间】：2019-04-05 16:12:27
【问题描述】：

我有一个基本的示例组件设置，它像这样绑定到一个 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";

【问题讨论】：

如果记得正确的<example-component :message="Hello"></example-component> 并添加message 到道具

标签： javascript vue.js vuejs2

【解决方案1】：

将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>

更新

在了解您的用例后，我建议使用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>

【讨论】：

【解决方案2】：

将属性添加到您的组件，使其成为父子，也就是说，您将在组件内绑定属性，您可以将数据传递给该属性。根据流程，您必须确定您将如何做到这一点，无论是从父亲到儿子还是从孩子到父亲。要将数据传递给孩子，您需要通过 props，如果您从孩子传递给父母，您将使用 $emit。 https://vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props

如果您使用父母对孩子，您将按照以下方式进行。派.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/

【讨论】：

【解决方案3】：

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">。

如果你输入某事。进入此字段，您应该会在组件更新中看到绑定值。

请在此处阅读手册：https://vuejs.org/v2/guide/index.html。真的很好，你的问题都在里面了。

【讨论】：

好的，但我的问题是如何更改父味精的值？如果我这样做 firstComponent 在控制台中说未定义。