Vue组件通讯的多种方式（个人记录）

一：常用写法

父组件

<template><div><aa class="abc" :snycTest.sync="test" ></aa>{{'外面的值：' + test}}<button @click="fn">外面改变里面</button></div>
</template><script>
import aa from './test.vue'export default {data () {return {test: ''}},methods: {fn () {this.test += 1}},components:{aa}}
</script>

子组件

<template><div><ul><li>{{'里面的值：'+ snycTest}}</li><button @click="fn2">里面改变外面</button></ul></div>
</template><script>export default {props: {snycTest: ''},methods: {fn2 () {this.$emit('update:snycTest', this.snycTest+1)
//这儿是关键 update:snycTest 自定义事件会告诉父组件将父组件的
//test值改为this.snycTest+1，并传回给子组件。} } }
</script>

二：v-model写法

上述代码可变为

父组件

<template><div><aa class="abc" v-model="test" ></aa>  // 组件中使用v-model{{'外面的值：' + test}} // 这儿试验test与内部msg值为双向绑定关系<button @click="fn">外面改变里面</button></div>
</template><script>
import aa from './test.vue'export default {data () {return {test: ''}},methods: {fn () {this.test += 1 }},components:{aa}}
</script>

子组件

<template><div><ul><li>{{'里面的值：'+ msg}}</li><button @click="fn2">里面改变外面</button></ul></div>
</template><script>export default {model: {    // 使用model， 这儿2个属性，prop属性说，我要将msg作为该组件被使用时（此处为aa组件被父组件调用）v-model能取到的值，event说，我emit ‘cc’ 的时候，参数的值就是父组件v-model收到的值。prop: 'msg',event: 'cc'},props: {msg: ''},methods: {fn2 () {this.$emit('cc', this.msg+2)}}}
</script>

三：v-bind="$attrs" 传递父组件prop、class、style；v-on="$listeners"传递父组件上的事件监听器和修饰符

假设引入了饿了么UI，把el-input二次封装

子组件

<template><el-input v-bind="$attrs" v-on="$listeners"></el-input>绑定该两属性
</template><style scoped>
.el-input >>> .el-input__inner {border-top: none;border-left: none;border-right: none;
}
</style>

父组件

<template><div><s-custom-wrap v-model="value" @focus="onInputFocus"></s-custom-wrap>
//v-model中的value可直接定义;focus事件可直接传递</div>
</template><script>
import SCustomWrap from "./SCustomWrap";export default {components: {SCustomWrap},data() {return {value:""};},methods: {onInputFocus() {console.log("focus");}}
};
</script>

ps:个人简单记录，稍微不用就忘记了，编码粗糙格式混乱请轻喷

Vue组件通讯的多种方式（个人记录）相关推荐

vue组件间通信六种方式
vue组件间通信六种方式组件之间的传值通信组件之间的通讯分为三种:父传子.子传父.兄弟之间的通讯: props/$emit 父传子:主要是通过props来实现的具体实现:父组件通过import引 ...
vue组件间通信六种方式（完整版）
前言组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示 ...
Vue 组件之间的传值方式有哪些？
Vue 组件之间的传值方式有哪些? 在平常写Vue项目时,组件传值必不可少,今天我们就要总结一下有哪些种方式呢? 1.父组件向子组件传值(用props) 子组件 <template>< ...
vue组件传值的十种方式
vue组件传值的十种方式一.props 父传子子组件 // 第一种数组方式 props: [xxx, xxx, xxx] // 第二种对象方式 props: { xxx: Number, xxx: ...
Vue组件通讯方式 provide/inject 介绍以及使用场景
文章目录 vue的通讯方式 provide / inject的缺点使用办法代码案例展示一(provide字符串) 代码案例展示二(provide返回一个方法,并且方法返回字符串) vue的通讯方式 ...
Vue 组件间通信六种方式
前言组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A 和 B.B 和 C.B 和 D ...
vue组件通讯：父传子、子传父、事件发射详解
1.组件通讯每个组件有自己的数据, 提供在data中:每个组件数据独立, 组件数据无法互相直接访问 (合理的) 但是如果需要跨组件访问数据, 怎么办呢? => 组件通信组件通信的方式有 ...
九段刀客：vue组件通讯
组件通信的方法: 1.props和emit 2.vuex 3.bus 4.children和parent 5.ref props和emit() 说明:props和emit用于父子组件通讯,props父 ...
Vue组件通信的六种方式
前言组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A 和 B.B 和 C.B 和 D ...

Vue组件通讯的多种方式（个人记录）

一：常用写法

二：v-model写法

三：v-bind="$attrs" 传递父组件prop、class、style；v-on="$listeners"传递父组件上的事件监听器和修饰符

Vue组件通讯的多种方式（个人记录）相关推荐

最新文章

热门文章