代码之家 › 专栏 › 技术社区 › Rehan

更改vuejs中的组件数据

vuejs2 vue.js javascript

-2

Rehan · 技术社区 · 6 年前

<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 回复 | 直到 6 年前

Boussadjra Brahim 6 年前

添加 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>

wwerner 6 年前

热释光;博士 看看这个例子,它做了你想要的: 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

Hamilton Gabriel 6 年前

将属性添加到组件中,使其成为父级到子级,也就是说,您将在组件中绑定属性,并且可以将数据传递给该属性。 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>

在此处输入代码

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

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