本文介绍了Vue组件的基本概念，包括组件组织、组件复用性和单个根元素限制。强调了每个组件必须有一个根元素，并讲解了如何识别父组件与子组件。此外，详细阐述了props的使用，如动态传值、传递多个值以及数组的处理，并强调了Vue的单向数据流原则，避免直接改变props。最后，提出了在需要改变props时的两种常见解决方案：保存初始值和使用计算属性。
组件组织
- 通常一个应用会以一棵嵌套的组件树的形式来组织。–VUE：组件化、数据驱动
- 例如，可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、标题之类的组件。
- 为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。
- 组件的注册类型分两种：全局注册和局部注册。
组件复用性
- 可以将组件进行任意次数的复用，例如，利用组件定义一个超级链接，在项目中多次使用
单个根元素限制
- 场景：写一个广告组件（包含广告标题、广告词）
- 如果在模板中这样写，Vue 会显示错误，并解释道 every component must have a single root
element (每个组件必须只有一个根元素)。 - 解决方案：将模板的内容包裹在一个父元素内，来修复这个问题
- 即组件模板template的单个根元素限制。
识别组件
- 识别父组件与子组件：
- ①在js中创建注册组件的代码被称为“子组件”（组件模板→子组件）
- ②在HTML文档中引用组件的代码被称为“父组件”（组件引用→父组件）
小结：注册处为子组件、引用处为父组件。
props传值
- 子组件的数据有时需要从父组件获取调用，此时便可以用props 从父级接收数据，props
的值可以是两种，字符串数组或者对象。接下来主要介绍下字符串数组的用法。 - 案例1：在子组件的友情链接描述里应用了父组件的数据，通过props接收数组格式的数据describtion，并将其渲染到组件模板中
props-动态传值
- 动态传值：日常开发里，传递的数据并不是直接写死的，而是来自父级的动态数据，使用指令 v-bind来动态绑定 props值，当父组件的数据变化时，也会传递给子组件
- 注意事项：
- 1、子组件通过props接收父级组件传递的数据
- 2、由于HTML特性不区分大小写，当使用 DOM 模板时，驼峰命名的 props 名称要转为短横分隔命名 。
- （即HTML中引用是短横分隔命名blog-title，JS的DOM模板里为小驼峰命名blogTitle，两者可以对应识别）
props传值-多个值
- 在组件的自定义标签上直接写该 props 名称，如果要传递多个数据，在 props 数组中添加项即可。
- 案例3：文章组件，组件data自带文章主体内容。
- 案例3：接下来从父级组件给传入文章标题、作者等信息
props传值-多个值（事件绑定）
案例分析：props 选项传值VS组件自身data函数return数据
- ①区别：props 来自父级，而 data是子组件自身数据，作用域是组件本身。
- ②这两种数据都能在模板 template 及计算属性 computed和方法 methods 中使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>识别组件</title>
<script src="../js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.wzArea{
width: 500px;
height: 500px;
border: 1px solid;
}
</style>
</head>
<body>
<div id="demo">
<!-- 父组件 -->
<!-- HTML里面推荐使用短横线分割命名法 -->
<my-component
:author='authorValue'
:title = 'titleValue'
></my-component>
</div>
</body>
<script type="text/javascript">
Vue.component('my-component',{
/*js里的props推荐使用驼峰*/
props:['author','title'],
// 子组件
template:`
<div class='wzArea'>
<h1>{{title}}</h1>
<p>{{wz}}</p>
<cite>{{author}}</cite>
</div>
`,
methods:{
},
data(){
return{
wz:'科技大厦羽绒服很快就收到回复还是奋达科技'
}
}
})
var demo = new Vue({
el:'#demo',
data:{
titleValue:'《卡活动开》',
authorValue:'Tony'
},
methods:{
},
watch:{
},
computed:{
},
components:{
mounted(){
this.descriptionValue = '百度一下你就知道(修改后)'
}
}
})
</script>
</html>
props传值-数组
- 案例4：场景→书籍卖书广告。在典型应用中，可能在 data 里有一个数组，组件通过遍历展示：
- 案例4：接下来给组件添加方法
- 可以使用 v-bind 来动态传递 prop。这在你一开始不清楚要渲染的具体内容，比如从一个 API 获取博文列表的时候，是非常有用的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>props传值--数组</title>
<script src="../js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="demo">
<!-- 父组件 -->
<!-- HTML里面推荐使用短横线分割命名法 -->
<ul>
<my-component
v-for="book of books"
:key="book.id"
:book="book"
></my-component>
</ul>
</div>
</body>
<script type="text/javascript">
// 在循环的时候怎么着可以实现状态维护
Vue.component('my-component',{
/*js里的props推荐使用驼峰*/
props:['book'],
// 子组件
template:`
<li>{{book.id}}---{{book.name}}---{{book.price}}</li>
`,
methods:{
},
data(){
return{
}
}
})
var demo = new Vue({
el:'#demo',
data:{
books:[
{id:1,name:'噢噢噢噢',price:'1000'},
{id:2,name:'哈哈哈哈',price:'1000'},
{id:3,name:'啊啊啊啊',price:'1000'},
{id:4,name:'呢呢呢呢',price:'1000'}
]
},
methods:{
},
watch:{
},
computed:{
},
components:{
mounted(){
this.descriptionValue = '百度一下你就知道(修改后)'
}
}
})
</script>
</html>
单向数据流
- Vue 2.x与Vue 1.x 比较大的改变就是，Vue2.x 通过 props 传递数据是单向的了，
也就父组件数据变化时会传递给子组件，但是反过来不行。 - 之所以这样设计，是尽可能将父子组件解耦，避免子组件无意中修改了父组件的状态。
[Vue警告]：避免直接改变道具，因为只要父组件重新渲染，该值就会被覆盖。
改变 props
- 业务中会经常遇到两种需要改变 props 情况
- （1）父组件传值→子组件保存初始值（初始化后解耦）
第一种是父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改。这种情况可以在组件 data 再声明一个数据，引用父组件的 props ，示例代码如下：
- 案例解析：
- 组件中声明了数据 childValue它在组件初始化时会获取来自父组件的 countValue之后就与之无关了，只用维护
childValue，这样就可以避免直接操作父级组件count数据。 - （2）被转变的原始值
- 另一种情况就是 props作为需要被转变的原始值传入。这种情况用计算属性就可以了。示例代码如下
- 总结：
- （1）组件组织：通常一个应用会以一棵嵌套的组件树的形式来组织，VUE两大核心思想–组件化、数据驱动。
- （2）组件复用性：可以将组件进行任意次数的复用
- （3）单个根元素限制：every component must have a single root element
(每个组件必须只有一个根元素) - （4）识别父组件与子组件：注册处为子组件、引用处为父组件
- （5）props传值：通过 Prop 向子组件传递数据，即子组件的数据有时需要从父组件获取调用，此时便可以用props 从父级接收数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>单向数据流</title>
<script src="../js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="demo">
<input type="number" v-model="numberValue"/>
<h1>父传值大小:{{numberValue}}</h1>
<hr >
<my-component :count="numberValue"></my-component>
</div>
</body>
<script type="text/javascript">
// 在循环的时候怎么着可以实现状态维护
Vue.component('my-component',{
/*js里的props推荐使用驼峰*/
props:['count'],
// 子组件
template:`
<div>
<input type="number" v-model="childValue">
<h1>子组件数值大小为:{{childValue}}</h1>
</div>
`,
methods:{
},
data(){
return{
childValue:this.count
}
},
mounted(){
}
})
var demo = new Vue({
el:'#demo',
data:{
numberValue:666
},
methods:{
},
watch:{
},
computed:{
},
components:{
mounted(){
this.descriptionValue = '百度一下你就知道(修改后)'
}
}
})
</script>
</html>
以上就是小编对VUE之组件（复用性、props、单向数据流）的见解，若有疑问，请随时联系小编！
17万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
