Vue父子组件通信的三两事(prop、emit)

栏目: 编程语言 · 发布时间: 5年前

内容简介:组件是Vue核心功能之一,合理的组件化,可以减少我们代码的冗余,提高项目的可维护性。下面,我将由浅入深的讲Vue的组件HTML是对特征名不敏感的语言,他会将所有的字符全部转换成小写。我们命名了一个组件的名称为

组件是Vue核心功能之一,合理的组件化,可以减少我们代码的冗余,提高项目的可维护性。下面,我将由浅入深的讲Vue的组件

在讲之前,首先我们先了解一下组件的命名。

HTML是对特征名不敏感的语言,他会将所有的字符全部转换成小写。我们命名了一个组件的名称为 nameTest ,然后再其他组件里面引用 <nameTest> </nameTest> ,那么我们将找不到这个组件,因为这个组件一已经将名字转换为 nametest

props : 父组件子组件 传参

基本使用

Parent.vue

<template>
<div>
    parent:下面是我的子组件
    <childSon :userName='name'></childSon>
</div>
</template>
<script>
import childSon from './Childs'
export default {
    name:'Parent',
    components:{
        childSon
    },
    data(){
        return{ 
            name:'啊哈'
        }
    }
}
</script>

Childs.vue

<template>
<div>
    child:这是父组件给我传的数据——{{userName}}
</div>
</template>
<script>
export default {
    name:'Childs',
    props:['userName'],
    data(){
        return{

        }
    }
}
</script>

Vue父子组件通信的三两事(prop、emit)

我们在 Parent.vue 组件里面引用子组件 Childs.vue 然后传入 userName 参数给子组件, Childs 在props里面接收父组件传传来的数据。

上面的例子我们传入的是一个字符串,其实,props可以传入 StringNumberObjectBoolenArray 等数据类型。那么我们在接受参数的时候就会有一个问题,我们怎么知道接收的应该是字符串'12'还是数字12呢?

所以 Vue 有一个 Prop验证 的功能。

Prop 验证

子组件在接受数据的时候,可以指定接收具体类型的数据、是否不能为空,是否有默认值等。

Parent.vue

<template>
<div>
    parent:下面是我的子组件
    <childSon :name='name' :firstName='firstName' :age='18' ></childSon>
</div>
</template>
<script>
import childSon from './Childs'
export default {
    name:'Parent',
    components:{
        childSon
    },
    data(){
        return{ 
            name:'大卫',
            firstName:'大华'
        }
    }
}
</script>

Child.vue

<template>
<div>
     child:这是父组件给我传的数据——name:{{name}}——firstName:{{firstName}}——lastName:{{lastName}}——age:{{age}}
</template>
<script>
export default {
    name:'Childs',
    props:{
        name: String,
        firstName: {
            type: String,//规定值的类型
            required: true //必须传值,否则报错
        },
        lastName: {
            type: String,
            default: 'lastNameDefault' //如果不传值,则为default的值
        },
        age: {
            type: [String,Number], //类型可以是多种
            validator: function(value) { //自定义验证

                let num = parseInt(value)
                if (num > 0 && num <100) {
                    return true;
                } else {
                    return false;
                }
            }
        }
    },
    data(){
        return{

        }
    }
}
</script>

运行结果如下图:

Vue父子组件通信的三两事(prop、emit)

如果我们将条件改变的时候, name 传入一个数组, firstName 不传值, age 传入一个不能转换为数字的值。

<childSon :name=[11]  age='ss' ></childSon>

运行结果如下图:

Vue父子组件通信的三两事(prop、emit)

Vue父子组件通信的三两事(prop、emit)

Vue父子组件通信的三两事(prop、emit)

Vue父子组件通信的三两事(prop、emit)

根据我们的验证规则, name 必须为一个 String 类型,所以控制台报错:希望得到一个String,得到了一个数组; firstName 为一个必填的值,但是我们没有传值,所以报错; age 要为一个可以转换成数字的值,但是我们穿了"ss",会经过我们自定义的验证,然后抛错。

Prop传入对象

如果我们要将一个 对象 的所有属性全部传给子组件,我们不需要将属性一个个的作为 Prop 传递,只需要将整个对象传递过去就可以。

Parent.vue

template>
<div>
    parent:下面是我的子组件
    <childSon v-bind='obj' ></childSon>
</div>
</template>
<script>
import childSon from './Childs'
export default {
    name:'Parent',
    components:{
        childSon
    },
    data(){
        return{ 
            obj: {
                name: 'lily',
                age: '16'
            }
        }
    }
}
</script>

Childs.vue

<template>
<div>
    child:这是父组件给我传的数据——name:{{name}}——age:{{age}}
</div>
</template>
<script>
export default {    
    name:'Childs',
    props:{
        name: String,
        age: {
            type: [String,Number], //类型可以是多种
            validator: function(value) { //自定义验证

                let num = parseInt(value)
                if (num > 0 && num <100) {
                    return true;
                } else {
                    return false;
                }
            }
        }
    }
}
</script>

运行结果如下图:

Vue父子组件通信的三两事(prop、emit)

我们传入一个 obj 对象,然后在子组件里面可以拿到对象的所有属性。

Prop的单向数据传递

直接作为一个本地变量

Parent.vue

<template>
<div>
    parent:<input type='text' v-model="content">下面是我的子组件 
    <childSon :content='content' ></childSon>
</div>
</template>
<script>
import childSon from './Childs'
export default {
    name:'Parent',
    components:{
        childSon
    },
   data() {
    return {
      content:'er'
    };
  },
}
</script>

Childs.vue

<template>
<div>
    child:这是父组件给我传的数据——{{con}}
</div>
</template>
<script>
export default {    
    name:'Childs',
    props:['content'],
    data(){
        return{
           con:this.content
        }
    }
}
</script>

运行结果如下图:

Vue父子组件通信的三两事(prop、emit)

emit : 子组件父组件 传递数据

基本使用

子组件父组件 传递数据,不能像上面一样实时的传递数据,必须通过 事件 触发。我们通过 $emit 方法来向父子间传递数据,第一个参数为事件的 名称 ,第二个为传递的 数据 ,是一个可选的参数。父组件必须监听同样的事件名称才能监听到我们的这个事件,事件抛出的值必须通过 $event 或者通过一个 方法 来访问。

**Parent.vue

<template>
<div>
    parent:这是我的子组件传给我的值:{{num}}
    <childSon :content='content' @getNum='getMsg'></childSon>
</div>
</template>
<script>
import childSon from './Childs'
export default {
    name:'Parent',
    components:{
        childSon
    },
   data() {
    return {
      content:'er',
      num:''
    }
  },
  methods:  {
      getMsg(num){
          this.num = num;
      }
  }
}
</script

Childs.vue

<template>
<div>
    child:这是父组件给我传的数据——{{content}} <br />
    <button @click="sendMsgtoParent">点击我可以向父子间传递参数哦</button>
</div>
</template>
<script>
export default {    
    name:'Childs',
    props:['content'],
    data(){
        return{
            num: 0
        }
    },
    methods: {
        sendMsgtoParent(){
            this.$emit('getNum',this.num ++ );
        }
    }
}
</script>

运行结果如下图:

Vue父子组件通信的三两事(prop、emit)

子组件 定义了一个 num 变量,然后点击按钮触发 method ,通过 $emit 向父组件发送事件的名称( getNum )和一个参数( this.num ),然后 父组件 监听事件 getNum ,然后将传递值赋值给父组件的一个属性上,这样就可以是实现子组件点击一次按钮,就向父组件发送一次数据。更多实例可以参考 官网

组件间的数据双向绑定

我们知道我们可以使用 v-model 来实现数据的双向绑定。但是如果这个数据是跨组件的话,我们要怎样实现绑定吗?

首先我们先要明白 v-model 的原理。 v-model 其实是分为两个方面,一方面数据层的改变引起视图层的变化,我们可以使用 v-bind 来实现,另一方面视图层的变化引起数据层的变化我们可以监听事件来实现。所以我们想要双向绑定一个数据,只需要这两步操作。具体实现参考 官网

弹框嵌套表格组件化使用

(待续...)


以上所述就是小编给大家介绍的《Vue父子组件通信的三两事(prop、emit)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

零基础学PHP

零基础学PHP

马忠超 / 2008-3 / 56.00元

《零基础学PHP》主要内容:PHP是一种运行于服务器端并完全跨平台的嵌入式脚本编程语言,是目前开发各类Web应用的主流语言之一。PHP因其功能强大、易学易用、可扩展性强、运行速度快和良好的开放性,而成为网站开发者的首选工具,其较高的开发效率,也给开发人员在编写Web应用程序时带来极大的便利。一起来看看 《零基础学PHP》 这本书的介绍吧!

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具