vue2中组件间通讯

目录

1. 使用属性，父组件向子组件传递数据props

1.1 道具属性使用

1.3父传子通讯案例

2 子传父    $emit

2.1.在子组件中定义一个方法，使用，'itemclick'是事件名，item是传过去的值。（实现子传父核心代码）btnClick(item)$emititem

2.2在子组件中监听点击事件并回调此方法

2.3.在父组件中定义一个方法cpnClcik（item）

2.4.并在父组件（vue实例）中调用（不写参数默认传递btnClick的item ），父组件监听事件名为的子组件传过来的事件。itemclick

 2.5代码实现效果​编辑

 3. 父访问子（儿童参考）ref属性

3.1$refs方式：

---

1. 使用属性，父组件向子组件传递数据props

首先在父组件中引入子组件，然后以属性的方式将数据传递给子组件

父组件：

<template>
	<div class="home">
        <!-- 在子组件中使用 :变量名=value  的方式向子组件传递数据，子组件通过 props 接收-->
        <HelloWorld :msg="fatchData" ref="childEl"/>       
    </div>
</template>

<script>
    // @ is an alias to /src
    import HelloWorld from '@/components/HelloWorld.vue'

    export default {
        name: 'Home',
        components: {
            HelloWorld
        },
        data () {
            return {
                fatchData: '我是父组件通过props传递给子组件的文字'
            }
        }        
    }
</script>

然后在子组件中使用props接收，props里定义的名字要和父组件定义的一致

子组件：

<template>
	<div>
        <span>{
  { msg }}</span>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        // 子组件通过使用 props 接收父组件传递过来的数据
        props: {
            msg: String
        }
  }
</script>

1.1 道具属性使用

数组写法

props: ['cmovies', 'cmessage']
对象写法

  props: { 
          cmessage: {
          type: String,
          default: 'zzzzz',
          required: true //在使用组件必传值
          }
  }
props属性的类型限制

//1.类型限制(多个类使用数组)
cmovies:Array,//限制为数组类型
cmessage:String,//限制为Strin类型
cmessage:['String','Number']//限制为String或Number类型
props属性的默认值

// 2.提供一些默认值，以及必传值
        cmessage: {
          type: String,
          default: 'zzzzz',//默认值
        }
props属性的必传值

cmessage: {
          type: String,
          default: 'zzzzz',
          required: true //在使用组件必传值
        }
类型是Object/Array，默认值必须是一个函数

//类型是Object/Array，默认值必须是一个函数
cmovies: {
	type: Array,
	default () {
		return [1, 2, 3, 4]
	}
},
自定义验证函数

vaildator: function (value) {
	//这个传递的值必须匹配下列字符串中的一个
	return ['zzzzz', 'ttttt', 'yyy'].indexOf(value) !== -1
}
自定义类型

    function Person(firstName,lastName) {
      this.firstName = firstName
      this.lastName = lastName
    }
	cmessage:Person//限定了cmeessage必须是Person类型

1.3父传子通讯案例

  <div id="app">
    <!-- v-bind不支持驼峰 :cUser改成 :c-User-->
    <!-- <cpn :cUser="user"></cpn> -->
    <cpn :c-User="user"></cpn>
    <cpn :cuser="user" ></cpn>
  </div>