Question

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

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

Answer 2

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。很好，您的问题已完全覆盖其中。

Answer 3

将属性添加到组件中，使其成为父级到子级，也就是说，您将在组件中绑定该属性，然后可以将数据传递给该属性。根据流程，您必须确定如何执行此操作，无论是从父亲到儿子还是从孩子到父亲。要将数据传递给子代，您需要传递道具，如果从子代传递给父代，则将使用$ emit。 https://vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props

如果您使用父母对子女，则可以通过以下方式进行。 Pai.vue

Laptop

Ai在子组件中调用参数

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

在此处输入代码

son.vue

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

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

在Vue.js中更改组件数据

3 个答案: