vue子组件值跟着父组件改变

父组件

<template>

<div id="list">

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

<div>

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

</div>

</div>

</template>

<script>

import child from ‘../../components/demo/child‘

export default {

name: ‘list‘,

components:{

child

},

data(){

return{

parentVal: 100,

}

},

}

</script>

子组件

<template>

<div id="childzj">

<p>child子组件</p>

<div>

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

</div>

</div>

</template>

<script>

export default {

name: ‘childzj‘,

props: {

inputData: {

}

},

data() {

return {

childVal: this.inputData

}

},

watch: {

inputData(newVal){

this.childVal = newVal;

console.log(newVal)

}

}

}

</script>

原文地址:https://www.cnblogs.com/lixihong/p/12195720.html

时间: 2024-11-02 21:42:52

vue子组件值跟着父组件改变的相关文章

Vue:子组件如何跟父组件通信

我们知道,父组件使用 prop 传递数据给子组件.但子组件怎么跟父组件通信呢?这个时候 Vue 的自定义事件系统就派得上用场了. 使用 v-on 绑定自定义事件 每个 Vue 实例都实现了事件接口,即: 使用 $on(eventName) 监听事件 使用 $emit(eventName, optionalPayload) 触发事件 Vue 的事件系统与浏览器的 EventTarget API 有所不同.尽管它们运行起来类似,但是 $on 和 $emit 并不是addEventListener 和

父组件如何获取子组件数据,子组件如何获取父组件数据,父子组件如何传值

1.父组件如何主动获取子组件的数据 方案1:$children $children用来访问子组件实例,要知道一个组件的子组件可能是不唯一的,所以它的返回值是个数组 定义Header.HelloWorld两个组件 <template> <div class="index"> <Header></Header> <HelloWorld :message="message"></HelloWorld>

vue 解决双向绑定中 父组件传值给子组件后 父组件值也跟着变化的问题

说明: 近日开发中碰见一个很诡异的问题,  父组件动态的修改对象 data 中的值, 然后将这个对象 data 传给子组件, 子组件拿到后将 data 中的值 乘以 100 ,发现父组件中的值也跟着变化了,通过查阅资料,发现 是 VUE 双向绑定中的一个bug,就此给出解决办法,亲测有效 情景描述: 对象  data = { price: 0, flag: true, name: " 哈哈 " } 父组件 更改 data.parice = 100,   然后将 data对象 传给子组件

vue子组件向传父组件传值

子组件: <template>     <div class="app">        <input @click="sendMsg" type="button" value="给父组件传递值">     </div> </template> <script> export default {       data () {         return

Vue子组件向父组件通信,父组件向子组件通信

首先,子组件代码如下 <template> <div style="border:1px solid black;width:400px;"> <h3>我是子组件里的</h3> <button>点击按钮子组件传递父组件</button> <div>我是父组件传子组件显示的:我还没有值</div> </div> </template> <script> ex

vue.js组件之间通讯--父组件调用子组件的一些方法,子组件暴露一些方法,让父组件调用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"></div></body><script src="node_modules/vue/

vue 子组件传值给父组件

子组件通过this.$emit("event",[args,....]),传值给父组件 HTML部分: 1 <div id="app"> 2 <tmp1 @func="test"></tmp1> 3 </div> JS部分: 1 var app = new Vue({ 2 el: "#app", 3 data: {}, 4 methods: { 5 test(data) { 6

vue.js(18)--父组件向子组件传值

子组件是不能直接使用父组件中数据的,需要进行属性绑定(v-bind:自定义属性名=“msg”),绑定后需要在子组件中使用props[‘自定义属性名’]数组来定义父组件的自定义名称. props数组中的数据是只读的,父组件中的data是可读可写的. 子组件自己的data,子组件可直接访问,与父组件无关. <div class="app"> <mycom1 v-bind:mymsg="msg"></mycom1> <!-- 子组

不触发事件,vue子组件传值给父组件

vue子传父,本来是以为是要通过触发一个事件,才能传值到父组件的. 结果原来可以不用的.别人说vuex,太麻烦了. 其实可以不用.那就看看怎么传吧. 先说下场景: 子组件created的时候就请求一些数据,请求来的数据,要传给父组件.此时都还没有触发任何事件.那么要传值给父组件,就要这么做了.(其实很简单的) 子组件代码: xxx.then(res=>{ this.childData = data.res this.$emit('cdata',this.childData) // 刚求完直接$e