Vue的父子通信

一、父组件向子组件通信

使用props属性传参(父组件的数据通过参数接口传递给子组件)

1.静态传参(参数不变)

Vue.component('my-component', {
  // 像function一样,声明组件的参数名称;
  props: ['message'],
  // 传进来以后,你可以在组件下的模板中使用这个数据
  template: '<span>{{ message }}</span>'
})
var vm = new Vue({
  el: '#example'
})
<div id="example">
  <my-component message='Hello World'></my-component>//传了一个固定的hello world
</div>

2.动态传参(参数动态)

<div id='example'>
  <input v-model="parentMsg">
  <br>
  <child v-bind:my-message="parentMsg"></child>//HTML(不能使用驼峰命名)中用短横线命名,会自动转换成myMessage
</div>
Vue.component('child', {
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'
})
new Vue({
    el:'#example',
    data:{
        parentMsg:''
    }
})

v-bind:my-message=“parentMsg 就这样把一个动态响应式的参数传递给了子组件。

3.参数验证

Vue.component('example', {
  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
      }
    }
  }
})

二、子组件向父组件通信 

Vue有两个方法是用来处理事件的:

  • 侦听事件使用 $on(eventName)
  • 定义和触发事件使用$emit(eventName)

使用v-on事件进行侦听,(v-on:input=''do'')他侦听到组件内部事件后,

$emit('input'),input这个事件将会传到组件外部乃至上级,从而执行父级实例的do()方法。


阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

Vue的父子通信

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭