vue中子父、父子之间传参+双向传参

子父传参

转自:https://blog.csdn.net/m0_37068028/article/details/72898119

vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用,改用$emit,$on

vm.$on( event, callback )

监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。

vm.$emit( event, […args] )

触发当前实例上的事件。附加参数都会传给监听器回调。

例子:

//父组件
<template>
    <ratingselect @select-type="onSelectType">ratingselect>
template>
<script>
    data () {
      return {
        selectType: 0,
    },
    methods: {
      onSelectType (type) {
        this.selectType = type
      }
    }
script>

父组件使用@select-type="onSelectType"监听由子组件vm.$emit触发的事件,通过onSelectType()接受从子组件传递过来的数据,通知父组件数据改变了。

// 子组件
<template>
  <div>
    <span @click="select(0, $event)"  :class="{'active': selectType===0}">span>
    <span @click="select(1, $event)"  :class="{'active': selectType===1}">span>
    <span @click="select(2, $event)"  :class="{'active': selectType===2}">span>
  div>
template>
<script>
    data () {
      return {
        selectType: 0,
    },
    methods: {
        select (type, event) {
            this.selectType = type
            this.$emit('select-type', type)
      }
    }
script>

子组件通过$emit来触发事件,将参数传递出去。

父子传参

转自:https://www.cnblogs.com/ygtq-island/p/6864477.html

先定义一个子组件,在组件中注册props

1
2
3
4
5
6
7
8
9
10
11
12
13

 

在父组件中,引入子组件,并传入子组件内需要的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 

 

这种方式只能由父向子传递,子组件不能更新父组件内的data


在组件上使用v-model(双向传参)

来自官网上的解释:

自定义事件可以用于创建支持v-model的自定义输入组件。

但是首先我们得记住之前的v-model的解释,也就是

等价于


为了能够使它正常工作,这个组件内的必须:1、将其value特性绑定到一个名为value的prop上; 2

在其input事件被出发的时候,将新的值通过自定义的input时间抛出!

故要写出如下代码:

Vue.component('custom-input',{
    props:['value'],
    template:`
    
    `
})

现在v-model就可以在组件上完美地工作起来


下面来一个朋友应用的例子:

自定义组件sidebar,要实现

父组件满足条件:data里面要有active元素

子组件满足条件:1、类似于父子单向传参,子组件中要有props名为value

2、类似于子父传参,(在子组件中设置active数据(只是个人用)),在子组件中进行监听

 
  

参数传入: value(val) {

if(val) {

this.active = val console.log("val") console.log(val) } }, 参数传出: active(val) { this.$emit('input', val) }

嘻嘻嘻可以在正常使用啦,以后再用还会进行其他优化




你可能感兴趣的:(vue)