vue组件入门第四节,浅谈Vue父子组件和非父子组件传值难点

By admin in 4858美高梅 on 2019年3月25日

  vue父子组件实行传值

  vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,什么人包裹着什么人哪个人正是父组件,被包裹的要素正是子组件。

 

正文介绍了浅谈Vue父子组件和非父子组件传值难题,分享给大家,具体如下:

推荐介绍自家的vue教程:VUE种类教程目录

行使Vue.js举办项目支出,那必然会使用基于组件的开发情势,那种办法确实给开发和掩护带来的必然的便利性,但只要涉及到零部件之间的数据与气象传递交互,就是一件小事了,特别是面对有一大堆表单的页面。

  父组件向子组件传值

  上边用的script引入的主意,那种vue-cli搭建的同理

  父组件通过 v-bind:属性名(自定义的) = “要传送的数据”

  子组件通过 props:[“属性名”] 
那个性情名就是父组件传递过来的多少新闻

<div id="app">
    <mod :abc="name" :d="title"></mod>
</div>

/*
    父组件向子组件发送消息
*/
Vue.component('mod',{
    template:'<div>{{abc}} {{d}}</div>',
    props:['abc','d'],
    data:function () {
        return {

        }
    }
});


// 父组件向子组件传递数据

new Vue({
    el:"#app",
    data:{
        name:'123',
        title:'456'
    }
});

1.什么样创制组件

上篇讲解了vue-router路由入门,以后讲讲关于vue组件的内容。
倘诺你们有应用过element组件的话,他就是以vue组件的格局实行包装的,在执教组件在此以前大家供给了解vue是多少驱动的,它的一体依靠于数据,大家应有遵照数据的例外来进行有关的拍卖,在这一前提下才能形成vue框架的沉思情势。
在掌握这一方式的前提下大家来探望vue组件是个什么东西。

在那边记录一下自己日日常用的处理情势,那篇小说首要记录父子组件间的数量传递,非父子组件首要通过Vuex处理,那篇作品权且不作表明。

  

1.新建多个零部件,如:在goods文件夹下新建goodsList.vue

什么是VUE组件?

在github上,各位请使用git拉一下项目:vuetemplate。不会利用gitLavin件的请去GitHub上下载压缩包。

/src/page/components下是有关零部件的代码

我们打开vue官网的机件API,能够简单浏览,对于新手来说这么些API的阅读有时很别扭,恐怕跟实际行使有些许差距。于是笔者的教学是树立在对那么些API的补给表达与简单化的,所以你们最棒还是看看这么些。

VUE组件可以扩展 HTML
成分,封装可选择的代码。在较高层面上,VUE组件是自定义成分, Vue.js
的编写翻译器为它丰盛特殊效果。在有点意况下,组件也能够是原生 HTML
成分的样式,以 is 特性扩张。

与文书档案里给的方案一样,父组件向子组件传递数据首要透过
props,子组件向父组件传递数据重要透过触发器
$emit(),只是在用法上会某些差别。

  子组件向父组件传值

  子组件向父组件传值时,子组件中
通过$.emit(‘自定义名字’,‘要传送的多少’)

  父组件通过 v-on:子组件自定义的名字 = 函数 
函数的arguments中就会接受到这几个值

<div id="app">
    <!-- 绑定要发送的消息的名称 -->
    <wulv @aabb="abc"></wulv>
</div>

Vue.component('wulv',{
    template:'<div><button @click="btn">按钮</button></div>',
    methods:{
        btn(){
            // 发送消息
            // 事件的名称 后面所有的都是要传递的消息
            this.$emit('aabb','a','b','c');
        }
    }
});

new Vue({
    el:'#app',
    methods:{
        abc(){
            console.log(arguments);   // 这里的arguments就是传递过来的值
        }
    }
})

  父子组件传值非凡简单,多用三回就足以学会了,在此看作笔记记录下来。

  

  假设你有幸看到笔者的篇章学到了一点东西,小编会非凡喜上眉梢的。  

 

<template>
  <div class='tmpl'>
    goodsList组件
  </div>
</template>

<style>

</style>

<script>

  export default {
    data() {
      return{}
    },
    created() {

    },
    methods: {

    },
    components:{

    }
  }
</script>

注册组件

在注册组件时大家有三种方法,第③种注册全局组件,第两种是局部使用组件,对于那一个使用多的组件来说全局无疑是最棒的选用,对于变数太大,应用不多且在统一目录下的片段使用是我们想要的。

① 、传递基本类型数据

2.在main.js中引入 import goodsList from ‘goods/goodsList.vue’

全局注册:

要登记三个大局组件,你可以行使 Vue.component(tagName, options)。

// 模板
Vue.component('my-component', {
  // 选项
})

八个模板并不能够评释怎么着,实例才能令人看的更明了:

// html
<my-component></my-component>

// 注册
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

组件的简要利用正是其一样子,即<my-component></my-component>最后成为了<div>A custom component!</div>。但是,实操中我们并不会那样平庸的应用,组件的复杂度远远不是其一样子的。

当子组件内容较少时,会直接传送基本类型数据,经常为String, Number,
Boolean两种。

3.在main.js中开创路由对象,创造路由规则

局地注册

要登记四个片段组件,你能够选用 Vue的components属性。

<script>
export default {
  components: {},
  data () {
    return {
    }
  }
}
</script>

事例才是真理:

// html
<my-component></my-component>

<script>
var vuecomponent = {
  template: '<div>A custom component!</div>'
}
export default {
  components: {
    'my-component': vuecomponent
  },
  data () {
    return {
    }
  }
}
</script>

先看个例子:

const router = new VerRouter({
  routes[
    {path:/goods/goodsList,component:goodsList}
  ]
})

DOM渲染的受制

在html中我们通晓多少标签的孩子是定点的诸如<ul> ,<ol>,<table> ,<select>限制了能被它包裹的因素,例如ul里面只可以包裹li。同时,一些像
<option> 那样的因素只可以出现在一些别的成分内部。

在自定义组件中使用这一个受限制的因素时会导致有些标题,例如:

<table>
  <my-row>...</my-row>
</table>

自定义组件 <my-row>
被认为是不行的内容,由此在渲染的时候会导致错误。那大家怎么化解吗?变通的方案是运用异乎通常的
is 属性:

<table>
  <tr is="my-row"></tr>
</table>
<!-- 父组件 parent.vue -->

<template>
  <div class="parent">
    <h3>问卷调查</h3>
    <child v-model="form.name"></child>
    <div class="">
      <p>姓名:{{form.name}}</p>
    </div>
  </div>
</template>

<script>
  import child from './child.vue'

  export default {
    components: {
      child
    },
    data () {
      return {
        form: {
          name: '请输入姓名'
        }
      }
    }
  }
</script>



<!-- 子组件 child.vue -->

<template>
  <div class="child">
    <label>
      姓名:<input type="text" :value="currentValue" @input="changeName">
    </label>
  </div>
</template>

<script>
  export default {
    props: {
      // 这个 prop 属性必须是 valule,因为 v-model 展开所 v-bind 的就是 value
      value: ''
    },
    methods: {
      changeName (e) {
        // 给input元素的 input 事件绑定一个方法 changeName 
        // 每次执行这个方法的时候都会触发自定义事件 input,并且把输入框的值传递进去。
        this.$emit('input', e.target.value)
      }
    }
  }
</script>

4.在主组件App.vue中设置 <router-link
to=”/goods/goodsList”>商品列表</router-link>

data 必须是函数

组件中务必是函数,通过Vue构造器传入的各样选项超过八分之四都能够在组件里用。
data 是二个见仁见智,它必须是函数。

// html
<simple-counter></simple-counter>

<script>
export default {
  components: {
    'simple-counter': {
      template: '<el-button size="small" v-on:click="counter += 1">{{ counter }}</el-button>',
      // 技术上 data 的确是一个函数了,因此 Vue 不会警告,
      // 但是我们返回给每个组件的实例的却引用了同一个data对象
      data: function () {
        return {
            counter: 0
        }
      }
    }
  },
  data () {
    return {
    }
  }
}
</script>

4858美高梅,vue组件入门第四节,浅谈Vue父子组件和非父子组件传值难点。这边有成都百货上千人看蒙了,问初叶不是如此写吗???

data: {
    counter: 0
}

那里别问,小编先河也没看懂,你能够这么想:把拥有关于data的数目引入变为data () {}就足以了。
缘何作者会那样说?小编一度在上一篇文章里说:vue路由的原形是依照url的不一致来进展零部件的各个切换罢了。而组件的data必须是数额,所以你看本人写的代码里有关.vue文件的都利用的是那种结构:

<template>
  <div>
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  }
}
</script>

尽管不知底您能够看上边包车型客车<simple-counter>零件的例证,其最后的衡山真面目变成了:

<template>
  <div>
        <el-button size="small" v-on:click="counter += 1">{{ counter }}</el-button>
  </div>
</template>
<script>
export default {
  data () {
    return {
        counter: 0
    }
  }
}
</script>

事实上您只要选拔vue-router路由你的.vue文本的组织只可以改成那样:

<template>
  <div>
  </div>
</template>
<script>
export default {
  data () {
    return {
        //  这里写基础数据
    }
  }
}
</script>

给子组件的 input 事件绑定二个方法
changeName,每趟执行这一个格局的时候都会触发自定义事件
input,并且把输入框的值传递进入。

系统会自动帮我们把那么些标签转化为a标签href=”#/goods/goodsList”
rel=”external nofollow”

重组组件

组件意味着协同工作,引用组件的地点叫父组件,如<simple-counter></simple-counter>,组件的内容则被变成子组件。

一般性父子组件会是那般的涉嫌:组件 A 在它的沙盘中运用了组件 B
。它们之间自然供给互相通讯:父组件要给子组件传递数据,子组件需求将它里面爆发的作业告知给父组件。但是,在3个上佳定义的接口中尽量将父子组件解耦是很要紧的。那保险了每种组件能够在相对隔离的环境中书写和驾驭,也大幅度进步了组件的可维护性和可重用性。

在 Vue.js 中,父子组件的涉及足以总括为 props down, events up
。父组件通过 props 向下传递数据给子组件,子组件通过 events
给父组件发送新闻。看看它们是怎么工作的?如图:

4858美高梅 1

父子组件数据交互

父子组件的相互的法则这一个具体呢?

父组件通过 v-model
指令绑定一个值,来接收子组件传递过来的数量。但如此只是父组件响应子组件的数目,借使还要子组件响应父组件传递的数码,就须求给子组件定义贰个props属性
value,并且这些天性必须是 value,无法写个其余单词。

2.怎么样在父组件中嵌入子组件

父子组件的互相

v-model
其实正是三个语法糖,详情能够参照使用自定义事件的表单输入组件。

1.新建3个子组件 subcomponent.vue

props的单向流

组件实例的功用域是孤立的。那象征不能够(也不应有)在子组件的模板内平素引用父组件的数码。要让子组件使用父组件的数额,大家须要通过子组件的props选项。

我们在开发中,1个单文件组件的.vue文件的着力构成是这么的:

<template>
  <div>
  </div>
</template>

<script>
export default {
  // el: '',
  props: {}, // 父到子传参
  components: {}, // 组件接收
  mixins: [], // 混合
  data () { // 基础数据
    return {
      //
    }
  },
  created () {}, // 创建周期
  watch: {}, // 状态过渡
  methods: {}, // 方法存放的地方
  computed: {}, // 计算属性存放的地方
  filters: {}, // 过滤
  directives: {} // 指令
}
</script>

然则常用的很少,父组件给子组件传值使用的便是props选项

props选项尚可二种情势的参数:

首先种固定的属性:如那样message="hello!传1个一般性的字符;
第三种动态属性:如那样v-bind:myMessage="this.message"传叁个变量,其得以简化为:myMessage="this.message"

事例如下:(父子组件在平等目录下,子组件-child.vue)

// 父组件
// HTML
<child message="HELLO!" :my-message="this.message"></child>

// script

<script>
import child from './child.vue'
export default {
  components: {
    child: child
    }
  },
  data () {
    return {
      message: '你猜'
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <div>{{message}}</div>
    <div v-text="myMessage"></div>
  </div>
</template>

<script>
export default {
  props: {
    message: null,
    myMessage: null
  }, // 父到子传参
  data () { // 基础数据
    return {
      //
    }
  },
  created () {}, // 创建周期
  watch: {}, // 状态过渡
  methods: {} // 方法存放的地方
}
</script>

prop
是单向绑定的:当父组件的天性别变化化时,将传输给子组件,但是不会反过来。那是为了幸免子组件无意修改了父组件的景色。

除此以外,每一次父组件更新时,子组件的有着 prop
都会更新为流行值。那意味你不应该在子组件内部改变 prop
。要是您如此做了,Vue 会在控制台给出警告。

然则有时大家正是需求修改,咋做?(老子需要)

一般情况下大家修改平时是那三种原因:

  1. prop 作为开头值传入后,子组件想把它看做局地数据来用;
  2. prop 作为开端值传入,由子组件处理成任何数据输出。

对于第3种情景我们得以李代桃僵,即用别的七个变量替代它,把它的值赋给这个变量:

data () { // 基础数据
    return {
      //
      counter: this.message
    }
  }

其次种情景能够定义3个乘除属性,处理 prop 的值并回到:

computed: {
    messagetoLowerCase: function () {
      return this.message.trim().toLowerCase()
    }
}

注意:使用字面量语法传递数值时,必须使用动态props,即如这样`v-bind:number="1"`

贰 、传递引用类型数据

2.在父组件中引入 import subComponent from
‘../subComponent/subcomponent.vue’

props验证

咱俩得以为组件的 props 内定验证规格。借使传入的数额不适合标准,Vue
会发出警示。当组件给别的人使用时,那很有用。

要钦点验证规格,要求用对象的花样,而不能用字符串数组:(修改上边的例证)

// html
<child message="HELLO!" :my-message="this.message" :number="11"></child>

// 子组件props
props: {
    message: String,
    myMessage: {
      type: String,
      required: true
    },
    number: {
      validator: function (value) {
        return value > 10
      }
    }
  }

阐明规格模板:

props: {
    // 基础类型检测 (`null` 意思是任何类型都可以)
    propA: Number,
    // 多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数字,有默认值,如果你没有传则以默认为准
    propD: {
      type: Number,
      default: 100
    },
    // 数组或对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }

当子组件里的始末相比多时,比如子组件有多少个表单成分,假诺还像上边那样给种种表单元素绑定值,那就要写过多再度代码了。所以那一个时候一般传递的是二个对象,传值的基本原理不变,不过写法上会有个别差别。

3.在父组件中注册 components

自定义事件向父组件传值

要么先看代码:

 export default {
    components:{
      //如果属性名和值相同,可以简写
      subComponent
    }
  }
事件$on与$emit

大家了然,父组件是行使 props
传递数据给子组件,但倘诺实组件要把数量传递回去,应该怎么做?那就是自定义事件!

各类 Vue 实例都落实了风云接口(伊夫nts interface),即:

行使 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件

小心:Vue的事件系统一分配离自浏览器的伊芙ntTarget
API。即使它们的运转类似,可是$on 和 $emit 不是add伊芙ntListener 和
dispatch伊夫nt 的别称。

你们一定很想获得怎么用事件监听来向父元素传递?

实在原理非常粗略正是大家在父组件上经过v-on监听子组件的轩然大波,而子组件通过$emit(eventName)
触发事件。例子如下:

// 父组件
<template>
  <div>
<child  v-on:onchild="inparent"></child>
</div>
</template>
<script>
import child from './child.vue'
export default {
  components: {
    child: child
  },
  data () {
    return {
    }
  },
  methods: {
    inparent () {
      alert('父组件响应了')
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <el-button size="small" v-on:click="onparent">父组件响应吧!!!</el-button>
  </div>
</template>

<script>
export default {
  props: {},
  data () { // 基础数据
    return {
    }
  },
  methods: {
    onparent () {
      this.$emit('onchild')
    }
  }
}
</script>

其一例子中,子组件给父组件传值通过$emit('onchild'),触发父组件的v-on:onchildv-on:onchild一呼百应后举办inparent函数。可是就直达我们的指标了???

传值,传值,传值,值吗?这几个API里可没说,那怎么办吧?

相当的粗略遵照程序工程师的思路来想,值肯定是那种情势:

this.$emit('onchild', 需要的值)
// 多个呢?
this.$emit('onchild', 需要的值1,需要的值2)

那接值呢?

onparent (需要的值1, 需要的值2) {
}

从而全体的情势应该是那般的:

// 父组件
<template>
  <div>
<child  v-on:onchild="inparent"></child>
</div>
</template>
<script>
import child from './child.vue'
export default {
  components: {
    child: child
  },
  data () {
    return {
    }
  },
  methods: {
   inparent (childs, childrens) {
      alert('父组件响应了')
      console.log(childs)
      console.log(childrens)
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <el-button size="small" v-on:click="onparent">父组件响应吧!!!</el-button>
  </div>
</template>

<script>
export default {
  props: {},
  data () { // 基础数据
    return {
        childs: '我是孩子的值',
        childrens: '我是孩子的另一个值'
    }
  },
  methods: {
    onparent () {
      this.$emit('onchild', this.childs, this.childrens)
    }
  }
}
</script>
<!-- 父组件 parent.vue -->

<template>
  <div class="parent">
    <h3>问卷调查</h3>
    <child :formData.sync="form"></child>
    <div class="">
      <p>姓名:{{form.name}}</p>
    </div>
  </div>
</template>

<script>
  import child from './child.vue'

  export default {
    components: {
      child
    },
    data () {
      return {
        form: {
          name: '请输入姓名',
          age: '21'
        }
      }
    }
  }
</script>



<!-- 子组件 child.vue -->

<template>
  <div class="child">
    <label>
      姓名:<input type="text" v-model="form.name">
    </label>
    <label>
      年龄:<input type="text" v-model="form.age">
    </label>
    <label>
      地点:<input type="text" v-model="form.address">
    </label>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        form: {
          name: '',
          age: '',
          address: ''
        }
      }
    },
    props: {
      // 这个 prop 属性接收父组件传递进来的值
      formData: Object
    },
    watch: {
      // 因为不能直接修改 props 里的属性,所以不能直接把 formData 通过v-model进行绑定
      // 在这里我们需要监听 formData,当它发生变化时,立即将值赋给 data 里的 form
      formData: {
        immediate: true,
        handler (val) {
          this.form = val
        }
      }
    },
    mounted () {
      // props 是单向数据流,通过触发 update 事件绑定 formData,
      // 将 data 里的 form 指向父组件通过 formData 绑定的那个对象
      // 父组件在绑定 formData 的时候,需要加上 .sync
      this.$emit('update:formData', this.form)
    }
  }
</script>

4.在父组件钦赐地点写多个自定义标签<subComponent></subComponent>

sync-修饰符

在局地状态下,大家兴许会必要对2个 prop
进行『双向绑定』。当贰个子零部件改变了一个 prop
的值时,那几个转变也会联合到父组件中所绑定的值。那很有利,但也会招致难题,因为它破坏了『单向数据流』的比方。由于子组件改变
prop
的代码和平日的情事改动代码毫无差异,当光看子组件的代码时,你完全不精通它何时悄悄地改成了父组件的意况。那在
debug 复杂结构的行使时会带来很高的掩护资金。

实际上,那多亏 Vue 1.x 中的 .sync修饰符所提供的功效。但是VUE在 2.0
中移除了 .sync。后来在 2.3 VUE又再一次引入了 .sync 修饰符。

// 父组件
<template>
  <div>
<child  :foo.sync="bar"></child>
</div>
</template>
<script>
import child from './child.vue'
export default {
  components: {
    child: child
  },
  data () {
    return {
          bar: 1
    }
  },
  watch: {
    bar: function () {
      console.log(this.bar)
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <div>{{foo}}</div>
    <el-button size="small" v-on:click="onsync">改变foo</el-button>
  </div>
</template>

<script>
export default {
  props: {
      foo: null
  },
  data () { // 基础数据
    return {}
  },
  methods: {
      onsync () {
         this.$emit('update:foo', this.foo + 1)
    }
  }
}
</script>

实在本质上VUE做到的只是:需求做的只是让子组件改变父组件状态的代码更易于被区分。

即把<comp :foo="bar" @update:foo="val => bar = val"></comp>简写为<child :foo.sync="bar"></child>,不让使用者在父成分上进展事件监听了而已别的都以同样的,它通过子组件传值改变父组件,重视props传值把修改的父组件成分再传回子组件而已。

props 是单向数据流,当大家须要对 props
内的品质进行双向绑定时,就须求运用.sync
修饰符,详情请参考.sync
修饰符,那里不做赘述。

3.什么完结父子组件之间的传值

小结:

父组件向子组件传值通过props;子组件向父组件传值,大家在父组件上通过v-on监听子组件的轩然大波,而子组件通过$emit(eventName)
触发事件。

迄今甘休组件的基本知识就截至了,高深的机件有关的,下一节再说。

唤醒:在眼明日笔者会渐渐附上VUE种类教程的任何后续篇幅,前边还有优异敬请期待,请大家关怀本人的专题:web前端。如有意见能够展开评论,每一条评论笔者都会认真对待。

那里供给专注的是,vue 中是无法间接修改 props
的,所以假使我们要向父组件传值,照旧必要通过修改 data 里的值,prop
只是作为父子之间通话的中间人存在。

1.父组件向子组件传值

别的,如若我们想要预览父组件最早先传的多少,就必要经过 watch 监听 prop
的变更,在子组件伊始化的时候就把值传进去。

1.在子组件中装置props:[‘commentId’]
//子组件用来接受父组件传递过来值的属性名称

注意: 笔者在子组件里把 this.$emit(‘update:formData’, this.form) 放在
mounted 当中的,其缘由是为了幸免在每一个 input 标签的 input
事件中触发自定义事件,但那样写的前提是,父子组件都要共用贰个对象。

2.在父组件的自定义子组件标签中装置<subComponent
:commentId=”this.$route.params.photoId”></subComponent>//父组件传递值给子组件

那也正是上边代码中,父组件中运用 :formData.sync=”form” 绑定值时,form
是3个目的,而子组件中的触发自定义事件 this.$emit(‘update:formData’,
this.form) ,this.form 也得是三个目的。

2.子组件向父组件传值

这边还索要留意的是,假诺有两个子组件使用3个对象,那就要制止这种写法,因为2个零件修改了那些指标的数量,那么其余子组件也就都随着变动了。

1.在父组件的自定义标签中设置贰个自定义函数<subComponent v-on:paramsChange="getSubComponentParams"></subComponent>

据此小编在用的时候都以给各种子组件分配了二个和谐的对象,比如:

2.在父组件的methods中声称函数

data () {
 return {
  parentObject: {
   child_1_obj: {},
   child_2_obj: {},
  }
 }
}
  getSubComponentParams(params){
  //接收来自子组件的参数params
    this.myParams = params;
  }

那是在父组件里定义的数量,当然名字不会那样取了。

3.在子组件中传送参数

结尾

  /**
  * 参数1:要触发的事件名称
  * 参数2:传递的值
  */
  this.$emit('paramsChange',this.params)

也没怎么说的了,对 Vue
依旧处于选拔的级差,对其底层的事物掌握还不够,小编也好想读读源码,但总只是想想…..大家认为有哪些不妥的地方纵然说,大家互动沟通沟通。

什么贯彻非父子组件的传值

如上就是本文的全部内容,希望对大家的学习抱有协助,也可望大家多多辅助脚本之家。

非父子组件中多个零部件没有关联,不能够利用this来传值,所以大家只能通过第3方的变量,来实现传值的机能,那个第①方变量正是:

你大概感兴趣的稿子:

  • 行使Vue动态生成form表单的实例代码
  • 详解vue表单——小白速看
  • Vue.js 表单控件操作小结
  • Vue.js达成可配备的登录表单代码详解
  • vue axios
    表单提交上传图片的实例
  • Vue.js自定义事件的表单输入组件方法
  • Vue+ElementUI完结表单动态渲染、可视化配置的法子
  • vue中动态绑定表单成分的品质方法
  • Vue
    表单控件绑定的贯彻示例
  • vue自动化表单实例分析

应用1个空的 Vue 实例作为中心事件总线

传值步骤:

1.开立3个公用js组件
在组件内导出三个空的Vue实例,比如新建2个commonvue.js文件

import Vue from 'vue'

export default new Vue() //es6的写法
/**
 * 相当于下面这样写
 * 
 * const bus = new Vue()
 * module.exports = bus
 */

2.在组件A中传递参数

bus.$emit('goodsCount',this.myCount)

3.在组件B中吸收接纳参数

bus.$on('goodsCount',(goodsCount)=>{
   const oldVal = $("#badgeId").text()

   const lastVal = parseInt(oldVal) + goodsCount
   console.log(lastVal)
   $("#badgeId").text(lastVal)
 })

如上正是本文的全体内容,希望对大家的就学抱有支持,也希望大家多多协助脚本之家。

您恐怕感兴趣的小说:

  • 行使FileReader
    API创制Vue文件阅读器组件
  • Vue
    创制组件的两种方法小结(一定要看)
  • vue
    怎么开创组件及零件使用办法
  • vue父组件向子组件动态传值的三种办法
  • 详解vue
    组件之间利用eventbus传值
  • vuejs使用$emit和$on实行零部件之间的传值的以身作则
  • Vue组件创设和传值的格局

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有