父子组件之间的传值
通常我们组件之间会相互传递一些参数，这样我们就用到了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== 方法传给子组件，子组件接收到以后就可以调用，然后把需要传递的参数传进去，这样，就相当于调用了父组件的方法，此时，父组件就可以取到传过来的值了
脑补时刻：
子传父更简单的方法
- $parent.changename()
<button @click="$parent.changename(data)">选择姓名</button>
- $parent.checkVal = data
<button @click="$parent.checkVal = data">选择姓名</button>
root 和 $parent 是一样的
