父组件的代码

<template>

<div class="home">

<img alt="Vue logo" src="../assets/logo.png">

<!--<HelloWorld msg="Welcome to Your Vue.js App"/>-->

父组件的值<input type="text" v-model="parentVal">

<div>

<child-test :inputData="parentVal"></child-test>

</div>

</div>

</template>

<script>

// @ is an alias to /src

import HelloWorld from '@/components/HelloWorld.vue'

import ChildTest from '@/components/child-test.vue'

export default {

name: 'home',

components: {

HelloWorld,ChildTest

},

data() {

return {

parentVal: 100,

}

},

}

</script>

子组件的代码

<template>

<div class="child">

子组件<input type="text" v-model="childVal">

</div>

</template>

<script>

export default {

name: 'child',

props: {

inputData: {

}

},

data() {

return {

childVal: this.inputData

}

},

watch: {

inputData(newVal){

this.childVal = newVal;

}

}

}

</script>

总结:父组件通过props传值给子组件,子组件通过watch监听父组件传过来的值改变来重新更新子组件的值。以此来达到子组件的值跟随父组件的值改变。如果不使用watch,虽然父组件传过来的值改变了,但是子组件不会自动更新。

vue子组件数据跟着父组件改变的更多相关文章

  1. Vue中子组件数据跟着父组件改变和父组件数据跟着子组件改变的方法

    一,子组件数据跟着父组件改变 父组件的代码 <template> <div class="home"> <img alt="Vue logo ...

  2. 子组件获取父组件数据 propsDown, 父组件获取子组件数据 eventUp

    (一) popsDowm 三种方法获取父组件数据:被动获得(1):主动获取(2). 1.被动获得: 父组件:v-bind: 绑定变量参数和方法参数:子组件:props 接收参数.可以在模板中直接使用也 ...

  3. vue 父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法

    Header.vue <template> <div> <h2>我是头部组件</h2> <button @click="getParen ...

  4. Vue子组件传递数据给父组件

    子组件通过this.$emit(event,data)传递数据到父组件 以下是例子: father.vue 父组件 <template> <div> <child @ne ...

  5. vue单文件组件形成父子(子父)组件之间通信(vue父组件传递数据给子组件,子组件传递数据给父组件)

    看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...

  6. vue 子组件传递数据跟父组件

    子组件 <body> <div v-on:click="test"></div> <script> export default { ...

  7. vue $emit $on 从子组件传递数据给父组件

    原理是: 子组件使用$emit发送数据,父组件使用$on,或者v-on绑定, 来监听子组件发送的数据. 子组件: <button @click="sendChildData" ...

  8. vue.js 父组件主动获取子组件的数据和方法、子组件主动获取父组件的数据和方法

    父组件主动获取子组件的数据和方法 1.调用子组件的时候 定义一个ref <headerchild ref="headerChild"></headerchild& ...

  9. vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值

      一.父组件调用子组件方法 父组件代码  parent.vue <template> <div> <button @click="parentFun" ...

随机推荐

  1. javascript模块化编程思想、实现与规范

    随着BS架构的发展,网站逐渐变成了互联网应用程序,嵌入网络的JavaScript代码越来越庞大,越来越复杂(业务逻辑处理或用户交互很多写在前端).网页越来越像桌面程序,需要一个团队分工协作.进度管理. ...

  2. Kubernetes PV与PVC的关系

    Kubernetes PV与PVC的关系 PersistenVolume(PV):对存储资源创建和使用的抽象,使得存储作为集群中的资源管理,分为有静态与动态.PersistentVolumeClaim ...

  3. MySQL for OPS 04:存储引擎

    写在前面的话 在使用 Linux 的时候,可以经常听到有关文件系统 FS(File System)的东西,MySQL 也有属于自己类似的东西,那就是存储引擎.之前在创建数据表的时候,在 Create ...

  4. Mysql设置binlog过期时间并自动删除

    问题: Mysql数据库由于业务原因,数据量增长迅速,binlog日志会增加较多,占用大部分磁盘空间. 解决方案: 出于节约空间考虑,可进行删除多余binary日志,并设置定期删除操作. .查看bin ...

  5. 三维网格细分算法(Catmull-Clark subdivision & Loop subdivision)附源码(转载)

    转载:  https://www.cnblogs.com/shushen/p/5251070.html 下图描述了细分的基本思想,每次细分都是在每条边上插入一个新的顶点,可以看到随着细分次数的增加,折 ...

  6. git和小乌龟在windows下安装

    一:所需软件 (1):git 下载地址:https://git-scm.com/download (2):TortoiseGit 下载地址:https://tortoisegit.org/downlo ...

  7. 利用Java EE里jsp制作登录界面

    jsp连接数据库.百度经验. 1.在新建的Project中右键新建Floder 2.创建名为lib的包 3.创建完毕之后的工程目录 4.接下来解压你下载的mysql的jar包,拷贝其中的.jar文件 ...

  8. 【设计模式】Bridge

    前言 Bridge设计模式,将一个复杂类分成可以单独开发的部分.分成的两个部分,abstraction,implementation.字面上是抽象和实现,但不同于抽象方法及其实现.下面摘录Wiki的两 ...

  9. JPA笔记1 ManyToOne

    persistence.xml <?xml version="1.0" encoding="UTF-8"?> <persistence ver ...

  10. Vue实战狗尾草博客管理系统第二章

    伙伴们出来啦,探讨各问题,关于项目中大量的表单,大家是怎么处理的? 本章主要内容如下:底层布局,路由配置,github仓库推送关联. 关联GitHub仓库 关联建立在github已创建账号的基础上 登 ...