Javascript 更改vuejs中的组件数据_Javascript_Vue.js_Vuejs2

Javascript 更改vuejs中的组件数据

javascript vue.js vuejs2

Javascript 更改vuejs中的组件数据,javascript,vue.js,vuejs2,Javascript,Vue.js,Vuejs2,我有一个基本的示例组件设置，它绑定到一个Vue实例，如下所示 <template> <div class="container-fluid"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="panel panel-default">

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

这是我的

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>

将

props

属性添加到组件中，并在其中设置

msg

属性：

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

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


父母亲

TL；DR看看这个例子，它可以满足您的需求：

您需要区分

数据

（组件专用数据）和

道具

（传递给子组件的数据）。请阅读Vue.js指南的这一部分：

在组件中，您需要声明道具：

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

然后，可以将数据绑定到子组件，如下所示：

，假设父组件已声明如下所示的

myMessage

：

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

要更改该值，可以将其绑定到某种类型的输入。下面是一个带有文本字段的示例：

如果在该字段中输入某物，则应在组件更新中看到绑定值

请务必在此处阅读手册：。这真的很好，您的问题完全包含在其中。

将属性添加到组件中，使其成为父级到子级，也就是说，您将在组件中绑定属性，并且可以将数据传递给该属性。根据流程，您必须确定您将如何做到这一点，无论是从父亲到儿子还是从孩子到父亲。若要将数据传递给子级，需要传递道具，若要将数据从子级传递给父级，则需要使用$emit。

如果您使用父子关系，您将按照以下方式执行。 Pai.vue


{{msg}}
导出默认值{
道具：{
味精：{
类型：字符串，
默认值：“你好”
}
}
}

调用参数的子组件中的Ai

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

在这里输入代码

圣维

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


从“./pai”导入pai
导出默认的{组件：{parent}，
数据：（）=>({
valueMsg='Hello Test'
})
}

如果记住更正

并将

消息添加到属性右侧，那么我的问题是如何更改父消息的值？如果我做了firstComponent，控制台中会显示未定义。
data : function(){
   return {
    myMessage : "Hello"
  }
}

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

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

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