返回首页 | 注册送体验金88送现金

合作共赢、快速高效、优质的网站建设提供商

更多精品源码-尽在织梦模板-www.moke8.com

网站开发vue中各组件之间传递数据的办法演示

时间:2017-08-18 编辑:admin

本文首要给我介绍了关于vue注册送体验金88送现金组件之间传递数据的相关材料,共享出来供我参阅学习,下面话不多说了,来一同看看详细的介绍:

效果域

在vue中,组件实例的效果域是孤立的,父组件模板的内容在父组件效果域内编译;子组件模板的内容在子组件效果域内编译。这意味着不能 (也不应该) 在子组件的模板内直接引证父组件的数据。

下面几种挑选能够完成组件之间数据的传递。

一、经过prop传递数据

1)在子组件中,运用prop特点,显现的标明,它所需求的数据。

2)在父组件中,需求引证子组件的当地,传入数据。

详细看下面的代码:

 div id="app" 
 my-item :value="value" //传入数据,留意引号里边的为父组件的数据,
 /my-item 
 /div 
Vue.component("my-item",{
 template:" div 这是组件,{{value}} /div ",
 props:["value"],//声明需求的数据, 特性是不区别大小写的,所以此处如果为驼峰命名法,如:myMessage,则在模板中需求转化为用断线离隔的方法:my-Message
 data:function(){
 return {
 methods:{
//创立vue实例
const vm=new Vue({
 el:"#app",
 data:{
 value:"这是父组件的数据",
 methods:{
});

这种挑选合适父组件向子组件传递数据,能够记为:你先通知我们要什么,然后我们给你什么。

留意:这种方法是单向数据流,当父组件的特点变化时,将传导给子组件,可是不会反过来。当你想改动prop中数据时,可采用如下挑选:界说一个局部变量,并用 prop 的值初始化它,或许运用核算特点。

二、经过自界说事情

自界说事情能够完成子组件向父组件传递数据,详细挑选如下:

1)在子组件中运用$emit(eventName,[...args])触发事情,传递数据

2)在父组件中$on(eventName,callback)监听事情,承受数据作为回调函数的参数,并履行回调函数。

其实这种挑选和angular中控制器之间传递数据的有点相似的。留意触发和监听事情的事情类型必需要保持一致,才可承受导数据。详细看下面的比如:

 div id="app" 
{{number}}
 !-- 在用到子组件的当地监听,监听当时实例上的自界说事情 ,承受参数,并履行回调-- 
 my-item v-on:cli="totlcli" 
 /my-item 
 /div 
Vue.component("my-item",{
template:" button v-on:click='add' {{count}} /button ",
data:function(){
 return {
 count : 0,
methods:{
 add:function(){
 this.count+=1;
 this.$emit("cli",this.count);//触发当时实例上的事情。多个参数能够数组的方法传递
//创立vue实例
const vm=new Vue({
el:"#app",
data:{
 number:""
methods:{
 totlcli:function(num){//这个回调在父组件监听到事情时,履行的,其参数为触发事情时传递的。
 return this.number=num;
});

这样就能够把子组件中的数据经过自界说事情的方法传到了父组件。

三、运用slot分发内容

首要运用场景是,混合父组件的内容与子组件自己的模板时用到。详细运用过程:

1)在子组件中,运用slot标签作为组件模板之中的内容分发插槽。 slot 元素本身将被替换。

2)在父组件中,运用slot特点,用于符号往哪个slot中刺进子组件内容。

当name相一起,呼应的内容就会被刺进到子组件中去
详细看下面的比如:

 div id="app" 
 my-item 
 p slot="header" 这是头部 /p 
 p 这是剩余的内容, /p 
 p slot="footer" 这是尾部 /p 
 /my-item 
 /div 
Vue.component("my-item",{
 template:" div "+
 " header slot name='header' /slot /header "+
 " main slot 备用插槽,当没有备用内容会显现出来 /slot /main "+
 " footer slot name='footer' /slot /footer "+
 " div ",
 props:{
 data:function(){
 return { 
 const vm=new Vue({
 el:"#app",
 data:{
 methods:{ 
 });

烘托结构如下:

留意:匿名的slot元素,作为找不到匹配的内容片段的备用插槽,即在父组件中没有运用slot特点的内容会在这个备用插槽显现。如果没有默许的 slot,这些找不到匹配的内容片段将被扔掉。


浏览:

网站建设

流程

    网站建设流程