详解vue.js数据传递以及数据分发slot

前端之家收集整理的这篇文章主要介绍了详解vue.js数据传递以及数据分发slot前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、组件间的数据传递

1.父组件获取子组件的数据  

*子组件把自己的数据,发送到父级

*vm.$emit(事件名,数据);

*v-on: @

示例用法:当点击send按钮的时候,“111”变成“我是子组件的数据”

<Meta charset="UTF-8"> 父级<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>子级的数据

2、子组件获取父组件的数据

调用子组件:

子组件之内:



  <Meta charset="UTF-8">
  自己<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>父级的数据
  

运行结果:

二、内容分发:

Vue.js提供了一种混合父组件内容与子组件自己模版的方式:slot,用来占一个位置

1、基本用法 

<Meta charset="UTF-8"> slot保留原来的位置

运行结果:ul标签里面的内容没有被覆盖,如果不使用slot,ul标签里的内容将会被覆盖

2、slot的name属性 

<Meta charset="UTF-8"> slot中name<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>的使用

运行结果:

原文链接:https://www.f2er.com/vue/34113.html

猜你在找的Vue相关文章