组件传值

父组件向子组件传值

组件内部通过props接收传递过来的值，父组件通过属性将值传递给子组件。

静态绑定

<body><div id="app"><test title="来自父组件的值"></test></div>
</body>
<script>Vue.component('test', {props: ['title'],data: function() {return {msg: '子组件的数据'}},template: '<div>{{title + "-" + msg}}</div>'})var vm = new Vue({el:'#app',data: {pmsg: '内容'}})
</script>

动态绑定

<test :title="title"></test>

props属性名规则：

在props中使用驼峰形式，模板中需要使用短横线的形式

Vue.component('test', {//驼峰props: ['titleName'],data: function() {return {msg: '子组件的数据'}},template: '<div>{{titleName + "-" + msg}}</div>'
})
//短横线形式
<div id="app"><test title-name="来自父组件的值"></test>
</div>

字符串形式的模板中没有这个规则

Vue.component('test', {props: ['titleName'],data: function() {return {msg: '子组件的数据'}},//在字符串中可以使用驼峰形式myNametemplate: '<div>{{titleName + "-" + msg}}<test1 myName="yc"></test1></div>'})Vue.component('test1', {props: ['myName'],template: '<div>{{myName}}</div>'})

props属性值类型：

<body><div id="app"><test :pstr="pstr" :pnum="12" :pboo="pboo" :parr="parr" :pobj="pobj"></test></div>
</body>
<script>Vue.component('test', {props: ['pstr','pnum','pboo','parr','pobj'],template: `<div><div>{{pstr}}</div><div>{{pnum}}</div><div>{{pboo}}</div><ul><li :key="index" v-for='(item,index) in parr'>{{item}}</li></ul><div>{{pobj.name}}</div></div>`})var vm = new Vue({el:'#app',data: {pstr: '内容',pboo:true,parr:[1,2,34],pobj: {name: 'yc',age: 24}}})
</script>

子组件向父组件传值

props传递数据原则，单向数据流。

子组件通过自定义事件向父组件传递信息

//触发方法$emit enlarge-text自定义事件
<button v-on:click='$emit("enlarge-text")'>扩大字体</button>

父组件监听子组件的事件

<menu-item v-on:enlarge-text='fontSize += 0.1'></menu-item>

<body><div id="app"><div :style="{fontSize: fontSize + 'px'}">{{msg}}</div><test @enlarge-text="onLarge"></test></div>
</body>
<script>Vue.component('test', {template: `<div><button @click='$emit("enlarge-text")'>扩大字号</button></div>`})var vm = new Vue({el:'#app',data: {msg: '遥岑',fontSize: 10},methods: {onLarge:function() {this.fontSize += 5}}})
</script>

传参：

子组件通过自定义事件向父组件传递信息

//第二个参数传参
<button v-on:click='$emit("enlarge-text",0.1)'>扩大字体</button>

父组件监听子组件的事件

//$event接收值
//如果绑定的函数 可以将$event作为参数传递给函数
<menu-item v-on:enlarge-text='fontSize += $event'></menu-item>

<body><div id="app"><div :style="{fontSize: fontSize + 'px'}">{{msg}}</div><test @enlarge-text="onLarge($event)"></test></div>
</body>
<script>Vue.component('test', {template: `<div><button @click='$emit("enlarge-text",5)'>扩大字号</button></div>`})var vm = new Vue({el:'#app',data: {msg: '遥岑',fontSize: 10},methods: {onLarge:function(val) {this.fontSize += val}}})
</script>

兄弟组件间传值

单独事件中心管理组件间的通信

//扮演事件中心角色
var eventHub = new Vue()

监听事件与销毁事件

//第一个参数:自定义事件名称 第二个参数:自定义函数
eventHub.$on('add-todo', addTodo)
eventHub.$off('add-todo')

触发事件

eventHub.$emit('add-todo', id)

<body><div id="app"><div>父组件</div><button @click="destory">销毁</button><test></test><test1></test1></div>
</body>
<script>//事件中心var hub = new Vue()Vue.component('test',{data: function() {return {num:0}},template: `<div><div>Tom:{{num}}</div>  <button @click="handle">点击</button></div>`,methods: {handle: function() {hub.$emit('jerry-event',2)}},mounted: function() {//监听事件hub.$on('tom-event',(val)=> {this.num += val})}})Vue.component('test1',{data: function() {return {num:0}},template: `<div><div>Jerry:{{num}}</div>  <button @click='handle'>点击</button></div>`,methods: {handle: function() {hub.$emit('tom-event',1)}},mounted: function() {//监听事件hub.$on('jerry-event',(val)=> {this.num += val})}})var vm = new Vue({el:'#app',methods: {destory:function() {hub.$off('tom-event')hub.$off('jerry-event')}}})
</script>

组件插槽

父组件向子组件传递内容

<body><div id="app"><alert-box>有bug</alert-box><alert-box>有问题</alert-box><alert-box></alert-box></div>
</body>
<script>Vue.component('alert-box', {template: `<div><strong>Error:</strong><slot>默认内容</slot></div>`})var vm = new Vue({el:'#app',data: {}})
</script>

具名插槽

根据名称进行匹配，没有匹配到的放在默认插槽中。

<body><div id="app"><alert-box><p slot="header">标题</p><p>内容</p><p slot="footer">底部</p></alert-box></div>
</body>
<script>Vue.component('alert-box', {template: `<div><header><slot name="header"></slot></header><main><slot></slot></main><footer><slot name="footer"></slot></footer></div>`})var vm = new Vue({el:'#app',data: {}})
</script>

作用域插槽

父组件对子组件进行加工处理，在父组件中获得子组件的数据对它进行加工。

<body><div id="app"><fruit-box :list="list"><!-- slotProps接收子组件自定义属性传过来的值 --><template slot-scope="slotProps"><strong v-if="slotProps.info.id === 1" class="current">{{slotProps.info.name}}</strong><span v-else>{{slotProps.info.name}}</span></template></fruit-box></div>
</body>
<script>Vue.component('fruit-box', {props: ['list'],//info子组件自定义属性template: `<div><li :key="item.id" v-for="item in list"><slot :info='item'>{{item.name}}</slot>    </li></div>`})var vm = new Vue({el:'#app',data: {list: [{id:1,name: 'apple'},{id: 2,name: 'orange'},{id: 3,name: 'banana'}]}})
</script>

Vue组件传值及插槽相关推荐

vue组件传值的十种方式
vue组件传值的十种方式一.props 父传子子组件 // 第一种数组方式 props: [xxx, xxx, xxx] // 第二种对象方式 props: { xxx: Number, xxx: ...
vue组件传值方式有哪些
Vue 作为一个轻量级的前端框架,核心两大特性就是响应式编程和组件化. 本文针对组件之间传值做详细讲解. Vue就是由一个一个的组件构成的,组件化是它的精髓,也是最强大的功能之一.而组件实例的作用域是 ...
vue组件传值 prop传递对象
vue组件传值 prop传递对象大家经常会使用组件传值,今天我用到的时候突然遇到了一些坑,想着今天来记录一下,大家做一个参考,此篇仅说一下prop传递对象. 子组件接收基本的数据类型子组件 < ...
41. Vue组件传值-父组件向子组件传值
前言前面写了组件的创建.切换等等篇章,主要讲述了组件自身如何在父组件app中如何渲染使用.这里存在一个问题,就是父组件的数据如何传递到子组件中. 这是一个很常见的情况,如果是jQuery那么都是直接 ...
Vue组件传值的三种方法
Vue组件传值的三种方式 1.父传子父传子使用props: 1.父组件:即在使用的子组件标签上,自定义一个绑定数据,这里我使用的是"mymsg",将父组件的msg绑定在其上. 2 ...
vue组件传值的11种方式
不写这篇文章,我自己都不知道我知道的vue组件传值的方式竟然有11种之多,其实静下来想想,常用的也有五六种,先上一张总结图: 1.父组件传给子组件在子组件里定义一个props,即props:['ms ...
Vue组件传值存在的弊端-Vuex状态管理
以下内容纯属个人理解,旨在记录和分享. 导入使用Vue组件传值,可以实现父子组件之间的数据交换.但实际上,在应用过程中仍然存在很多不便之处: 当存在多层组件嵌套时,组件之间的传值将会变得极度麻烦和繁 ...
【vue】vue组件传值的三种方式
前言 vue的组件传值分为三种方式:父传子.子传父.非父子组件传值引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递父组件通过 prop 给子组件下发数据,子组件通过事件 ...
this指向-作用域、作用域链-预解析变量提升-Vue组件传值父子子父非父子-Vue数据双向绑定原理
目录 this指向作用域.作用域链预解析变量提升 Vue组件传值父子子父非父子 Vue数据双向绑定原理 1.this指向函数的this指向看调用.不看声明 (1)普通函数调用 ①函数名 ...

Vue组件传值及插槽

目录

组件传值

父组件向子组件传值

子组件向父组件传值

兄弟组件间传值

组件插槽

父组件向子组件传递内容

具名插槽

作用域插槽

Vue组件传值及插槽相关推荐

最新文章

热门文章