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
<template>
    <div>
        <div>{{message}}(子组件)</div>
    </div>
</template>
<script>
export default {
    props: {
        message: String  //定义传值的类型<br>    }
}
</script>
<style>
</style>

 

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
    <div>
        <div>父组件</div>
        <child :message="parentMsg"></child>  
    </div>
</template>
 
<script>
 
import child from './child'  //引入child组件
export default {
    data() {
            return {
                parentMsg: 'a message from parent'  //在data中定义需要传入的值
            }
        },
        components: {
            child
        }
}
</script>
<style>
</style>

 

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


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

来自官网上的解释:

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

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

<input v-model="searchText">

等价于

<custominput 
v-bind:value="searchText"
v-on:input="searchText=$event">
</custominput>

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

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

故要写出如下代码:

Vue.component('custom-input',{
    props:['value'],
    template:`
    <input v-bind:value="value"
    v-on:input="$emit('input',$event.target.value)">
    `
})

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

<custom-inpu v-model="searchText"></custome-input>


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

自定义组件sidebar,要实现

<sidebar v-model="active"></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) }

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




展开阅读全文
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值