vue 父子组件之间传值

父子组件之间的传值

通常我们组件之间会相互传递一些参数，这样我们就用到了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('check-name',val)== 这个方法传两个参数，第一个是自定义事件名称，第二个是点击时拿到的值（需要传到父组件的值），然后我们在父组件又自定义了一个事件，事件名称就是子组件$emit中的第一个参数名称,

==@check-name='changename'==,

然后我们在changename中就可以输出子组件传过来的值了

• 子组件给父组件传值

  • 传递一个方法

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

脑补时刻：

子传父更简单的方法

1. $parent.changename()

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

2. $parent.checkVal = data

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

root 和 $parent 是一样的