校园的晚霞
学vue必须要会的就是组件这玩意啦,不然可能就约等于白学。
我自己前期完成老师布置的任务,不瞒你说,交上去,直接被骂,原因就是我一个组件没抽😂(一边学,一边敲,没想那么多,只想着实现)。
一个小小页面,1163行(捂脸)。
然后就下定决心来好好整vue组件,其实我觉得还蛮好玩的。接下来就让我们看看组件必会的 props
了解这个之前一定得懂点组件基础哈。
vue.js文档在props这节真就是直接上手,把我当大佬
组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。
也就是说props
是子组件访问父组件数据的唯一接口。即我们想要动态的传递数据给子组件的话,子组件中必须有props
才行。
如果子组件想要渲染父组件的元素,那么就必须要在prop
中声明一个变量才行,这个变量就可以引用父元素的数据,然后就可以进行渲染。
我们写了一个小组件demo,然后在App中引用
<template>
<div>
<p>子组件demo</p>
<h1>{{message}}</h1>
</div>
</template>
<script>
export default {
props: ['message']
}
</script>
App里的
<template>
<div class="todo-container">
<Demo ></Demo>
</div>
</template>
<script>
import Demo from './components/Demo'
export default {
components: {
Demo
}
}
</script>
初始化效果
那行<h1>{{message}}</h1>
并没有展示出来。
子组件虽然已经接收,但是我们要如何在App组件中传值勒?
<!-- :message 对应的是子组件 prop 中接收变量的名称
"message" 对应的父组件中data中定义的数据
-->
<Demo :message="message"></Demo>
data () {
return {
message: 'hello'
}
}
接下来我们再看看子组件有没有被渲染
已经是渲染成功啦。
另外在子组件接收props
时,我上述的方式是最简单的,理论上接收时应当指定类型,因为JavaScript是一门弱语言。
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}
这就是最基本的父组件传递给子组件数据的方式啦。
注意:当父组件的属性值变化,子组件也会立马随之变化,但是反过来并不会如此。
另外,不要尝试在子组件内部改变Prop接收到的值,这么做当值为对象时,可以成功,但是这是违反规则的,控制台上vue也会给出警告
但是我们难免会有要在子组件修改值的时候,那么有什么方法勒?
1、第一种:
父元素通过prop
传递了一个初始值,而我们在子组件中希望之后都把它当作一个本地的prop数据来使用。这种情况我们通常会在子组件中的data区域定义一个变量并将值赋给它。
props: ['message'],
data: function () {
return {
msg: this.message
}
}
2、第二种:计算属性
官方例子:
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
注意:在 JavaScript 中对象和数组是通过引用传入的,所以对于一个数组或对象类型的 prop 来说,在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。这是不被建议的
如下列这种即是违反规则的:
有错的不是v-model
哈,而是咱们没把 prop 用好哈。
通过 prop 父组件可以传递数据给子组件,使得子组件可以做到被多次复用。
剩下的文章,咱们就是想想如何让子组件返回数据给父组件,父子组件、祖孙组件、兄弟组件是如何通信的啦,又是如何给子组件绑定事件的啦。
持续更新中,我们一起进步。
大家一起加油!!!如若文章中有不足之处,请大家及时指出,在此郑重感谢。
纸上得来终觉浅,绝知此事要躬行。
大家好,我是博主宁在春
:主页 一名喜欢文艺却踏上编程这条道路的小青年。 希望:我们,待别日相见时,都已有所成
。