vue v-modle实现组件之间的动态传值

父子通信用v-bind

子组件

<template><div @click="chanage">子级message：{{ message }}</div>
</template>
<script>export default {props: {message: {type: String,default: ''}},data() {},methods: {chanage() {this.message = 'your message value';}}}
</script>

父组件

<div>父级message：{{ message }}</div>
<child :message="message"></child>

结果：
点击子组件时，子组件的message发生了改变，但是父级的message并没有发生改变

父子通信用v-model
父组件

<template><div><p>我是父级组件</p><p>父级组件内容：{{ text }}</p><p><button @click="onChange">改变内容</button></p><hr><child v-model="text"></child></div>
</template>
<script>
import Child from './child'
export default {components: {Child},data() {return {text: '我是父级组件的内容'}},methods: {onChange() {this.text = '我是由父级组件触发改变了内容'}}
}
</script>
<style scoped>
</style>

子组件

<template><div><p>我是子组件</p><p>子组件内容：{{ myValue }}</p><p><button @click="onChange">改变内容</button></p></div>
</template>
<script>
export default {props: {//此处一定要用valuevalue: {type: String}},data() {return {myValue: this.value}},methods: {onChange() {this.myValue = '我是由子组件触发改变了内容'}},watch: {//监听prop传的value，如果父级有变化了，将子组件的myValue也跟着变，达到父变子变的效果value(newVal) {this.myValue = newVal},//监听myValue，如果子组件中的内容变化了，通知父级组件，将新的值告诉父级组件，我更新了，父级组件接受到值后页就跟着变了//参考官网：https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-modelmyValue(newVal) {this.$emit('input', newVal)}}
}
</script>
<style scoped>
</style>

父变子变，子变父变

vue v-modle实现组件之间的动态传值相关推荐

【Vue组件传值】不同的组件之间的数据传值方法
不同的组件之间的数据传值方法父组件向子孙组件传值.通过方法provide / inject (1)provide/inject的介绍: provide/ inject 是vue2.2.0新增的api ...
vue2.0中组建里面套用组件_vue19 组建 Vue.extend component、组件模版、动态组件的实例代码...
具体代码如下所示: document var aaa=vue.extend({//继承出来一个vue类aaa template:' 我是标题3 ' }); var a=new aaa();//a跟vm ...
vue中，兄弟组件之间传值
vue中,兄弟组件之间传值项目中,需要使用多个子组件,当需要传递值的时候,较为麻烦,怎样实现呢 1.一般可以使用子组件a传递给父组件,再由父组件传递给子组件b.但是一般较为麻烦, 2.使用bus作为 ...
vue.js html 相互传值,Vue 父子组件之间相互调用传值以及多层组件之间相互调用传值...
一.父子组件传值要点1:父组件赋予子组件属性值,子组件通过props 来接收值. 要点2:父组件可以通过子组件对象($ref),来调用子组件的属性以及方法要点3:子组件通过$emit 来调用父组 ...
组件之间如何进行传值
组件之间如何进行传值如果组件没有嵌套关系呢 1.父子组件之间传值 //父组件 <div id="app"><horizontal-tab :tab-list=& ...
Vue中关于父子组件之间的通信
父子组件之间的通信是vue中的基础知识,在此做一个简单的梳理. 总的来说父传子是通过props,子传父是通过$emit. 简单的一个demo来说说,先上代码父组件: 如图,HelloWorld是一个 ...
vue组件的基本使用，以及组件之间的基本传值方式
组件(页面上的每一个部分都是组件) 1.三部分:结构(template),样式(style),逻辑(script) 2.组件的作用:复用 3.模块包含组件 4.组件创建: 1.全局组件:Vue.com ...
VUE 2.0 父子组件之间的通信
父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent><child :child-com="content"></child ...
vue组件之间通信（传值）---8种方式
Vue组件之间的通信方式(个人理解) props(父传子) //父组件 parent.vue<template>//子组件<child-com :num="num" ...
vuex 实现vue中多个组件之间数据同步以及数据共享。
http://pan.baidu.com/s/1hrJfpli demo下载地址前言在一些项目中有很多数据状态之间要实现数据共享状态共享,例如购物车的数据.用户的登录状态等等.vue父元素是可以 ...

vue v-modle实现组件之间的动态传值

父子通信用v-bind

vue v-modle实现组件之间的动态传值相关推荐

最新文章

热门文章