父组件的代码

<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. kali渗透综合靶机(十五)--Breach-1.0靶机

    kali渗透综合靶机(十五)--Breach-1.0靶机 靶机下载地址:https://download.vulnhub.com/breach/Breach-1.0.zip 一.主机发现 1.netd ...

  2. 一款常用的截图工具(能够截gif动图)

    这款工具用来截程序的演示GIF图片,灰常方便. 直接上Github地址: https://github.com/NickeManarin/ScreenToGif

  3. 升级GCC

    1. wget http://ftp.gnu.org/gnu/gcc/gcc-4.9.4/gcc-4.9.4.tar.gz 2. tar -zxvf gcc-4.9.4.tar.gz 3. cd gc ...

  4. ubuntu玩坏之后

    昨天,安装openssh-server的时候,与openssh-client冲突,故卸载openssh-client然后重装openssh-server解决问题. 今天,想装emacs,发现跟perl ...

  5. 去除数组空格 php

    public function trimArray($params){ if (!is_array($params)) return trim($params); return array_map([ ...

  6. 2.GoF 的 23 种设计模式的分类和功能

    1. 根据目的来分 根据模式是用来完成什么工作来划分,这种方式可分为创建型模式.结构型模式和行为型模式 3 种. 创建型模式:用于描述“怎样创建对象”,它的主要特点是“将对象的创建与使用分离”.GoF ...

  7. js中对字符串(String)去除空格

    str为要去除空格的字符串: 去除所有空格: str = str.replace(/\s+/g,""); 去除两头空格: str = str.replace(/^\s+|\s+$/ ...

  8. 静态文件 static

    一.常见的形式 前面初步搭建Django开局时候就 在 项目路径下 建立了statics 文件夹,然后在 settings.py  文件的末尾添加了 statics 文件夹的绝对路径. # 这个可以给 ...

  9. 01-MySQL 大纲介绍

    MySQL 大纲介绍 1.官方定义的MySQL DBA工作内容 (1)运维DBA 初级:各版本.各平台安装搭建.升级 中级:体系结构原理.基础管理(启动关闭.初始化配置文件管理.多实例管理.用户权限管 ...

  10. 基于Arduino和python的串口通信和上位机控制

    引言 经常的时候我们要实现两个代码之间的通信,比如说两个不同不同人写的代码要对接,例如将python指令控制Arduino控件的开关,此处使用串口通信是非常方便的,下面笔者将结合自己踩过的坑来讲述下自 ...