Vue的基础知识（三）

一、组件交互（组件通信）

1、父组件向子组件传值

• 组件内部通过props接收传递过来的值（props：[ ]）
• 父组件通过属性将值传递给子组件

parent中
<!-- 静态的 -->
<v-child title="来自父组件的数据"></v-child>
<!-- 动态的属性绑定 -->
<v-child :title='title'></v-child>

child中
<!-- child通过props接受,直接渲染页面即可 -->
export default {
    props:['title'],
};

 

即：给父组件绑定自定义属性，子组件通过props接受。

 

props传递数据的原则：单项数据流（只允许父组件向子组件传递数据，不允许子组件直接操作props的数据）

 

props属性名规则：

1、在props中使用驼峰命名，模板中需要使用短横线的形式

2、字符串形式的模板中没有这个限制

 

props属性值类型：

字符串String、数值Number、布尔值Boolean、数组Array、对象Obeject

记得绑定属性时得带上冒号，否则得到的都是字符串类型。

 

2、子组件向父组件传值

• 子组件通过自定义事件向父组件传递数据
• 父组件监听子组件的事件

parent.vue中
<template>
<div>
    我是父组件
    <v-child :gift='gift' @giveTo='own'></v-child>
    这是儿子给我的：{
  {fromSon}}
</div>
</template>
methods:{
    own(e){
        console.log(e);
        this.fromSon = e
    }
},

child.vue中
<template>
<div>
    我是子组件
    <div>这是父亲给的一辆车-----{
  {gift}}</div>
    <button @click="send">给父亲点money</button>
</div>
</template>
<script>
export default {
 props:['gift'],
 data () {
 return {
     money:'1万'
 }
},
methods:{
    send