父子组件之间的传值

通常我们组件之间会相互传递一些参数，这样我们就用到了prop属性

prop类型

下面这是一段字符串数组形式的prop

props:['title','name','age','like']

但是，通常你需要给每个prop指定特定的类型，这个时候我们就得用对象的形式来列出

props:{
    title: Number,
    like: String,
    boolean: Boolean,
    array: Array,
    girlFraid: Object,
    callback: Function,
    .......
}

prop用法

不多说了，直接上代码

/*这个是子组件*/

<template>
    <div class="box1">
        <ul>
            <li>姓名:{{data.name}}</li>
            <li>年龄:{{data.age}}</li>
            <li>身高:{{data.height}}</li>
            <!--第四种方法-->
            <!-- <button @click="checkName(data)">选择姓名</button> -->
            <!--第五种方法-->
            <!-- <button @click="$parent.changename(data)">选择姓名</button> -->
            <!--第六种方法-->
            <button @click="$parent.checkVal = data">选择姓名</button>
        </ul>
    </div>
</template>

<script>
export default {
    // 父组件动态绑定的data属性，子组件用字符串数组的prop接收
    props: ['data','action'],
    name:'box',
    methods: {
        checkName: function(val) {
            // 第一种方法： 向父组件传值用$emit,父组件添加自定义事件，事件名称就是  check-name
            // this.$emit('check-name',val)
            // 第二种方法： 接收的父组件传过来的 action 方法
            this.action(val)
            // 第三种方法：直接用 this.$parent.changename 输出this看一下
            // this.$parent.ahangename(val)
        }
    },
}
</script>

/*这个是父组件*/

<template>
  <div class="hello">
    <!-- check-name是子组件中$emit定义的名字 -->
    <box @check-name='changename' v-for="(item, index) in list" :data="item" :key="index" :action="changename"></box>
    <p>选中的姓名：{{checkVal.name}}</p>
    <p>选中的年龄：{{checkVal.age}}</p>
    <p>选中的身高：{{checkVal.height}}</p>
  </div>
</template>
<script>
    //引入组件
  import box from '@/components/test'
  export default {
    name: 'HelloWorld',
    data () {
      return {
        checkVal: [],
        list:[{
            name:'刘旭',
            age:18,
            height:183
          },{
            name:'刘旭1',
            age:19,
            height:173
          }]
      }
    },
    
    components:{
      box
    },
    
    methods:{
      changename:function(val){
        this.checkVal = val
      }
    }
  }
</script>
  • 父组件给子组件传值 prop

从上面我们可以简单的看出，父组件循环渲染 list ，然后动态绑定了 data 属性，data 的值就是 list 对象，
我们子组件通过 prop[‘data’] 这种方式就可以接收到父组件传递过来的值

  • 子组件给父组件传值
  • $emit

子组件给父组件传值我们用 $emit，我们子组件定义了一个点击事件 @click，点击事件里面用了 this.$emit(‘check-name’,val) 这个方法传两个参数，第一个是自定义事件名称，第二个是点击时拿到的值（需要传到父组件的值），然后我们在父组件又自定义了一个事件，事件名称就是子组件$emit中的第一个参数名称,@check\name=‘changename’,然后我们在changename中就可以输出子组件传过来的值了

  • 子组件给父组件传值
  • 传递一个方法

我们知道，prop可以接受任意类型的参数，这样，我们可以把父组件的 changename 方法传给子组件，子组件接收到以后就可以调用，然后把需要传递的参数传进去，这样，就相当于调用了父组件的方法，此时，父组件就可以取到传过来的值了

脑补时刻：

子传父更简单的方法

  1. $parent.changename()
<button @click="$parent.changename(data)">选择姓名</button>
  1. $parent.checkVal = data
<button @click="$parent.checkVal = data">选择姓名</button>

$parent 里面包括了父组件里面 data 中的所有属性、方法。$root 和 $parent 是一样的