Vue中props的详解

看一下官方文档：

组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。

也就是props是子组件访问父组件数据的唯一接口。

详细一点解释就是：

一个组件可以直接在模板里面渲染data里面的数据(双大括号)。

子组件不能直接在模板里面渲染父元素的数据。

如果子组件想要引用父元素的数据，那么就在prop里面声明一个变量(比如a)，这个变量就可以引用父元素的数据。然后在模板里渲染这个变量(前面的a)，这时候渲染出来的就是父元素里面的数据。

1. 基本用法

图1-props

var com1 = Vue.component('child',{

// 声明在prop中的变量可以引用父元素的数据

props:['hello'],

// 这里渲染props中声明的那个hello

template:'

',

})

var app1 = new Vue ({

el: '#app1',

data: {

greet: {

hello:'hello,',

world: 'world',

},

message: 'message1',

}

})

2. camelCase vs. kebab-case：js中用驼峰式命名，在html中替换成短横线分隔式命名

Vue.component('child', {

// 在 JavaScript 中使用 camelCase

props: ['myMessage'],

template: '{{ myMessage }}'

})

3.单向数据流： props是单向绑定的

当父组件的属性变化时，将传导给子组件，但是反过来不会。

每次父组件更新时，子组件的所有 prop 都会更新为最新值。

不要在子组件内部改变 prop。如果你这么做了，Vue 会在控制台给出警告。

在两种情况下，我们很容易忍不住想去修改 prop 中数据：

Prop 作为初始值传入后，子组件想把它当作局部数据来用；

Prop 作为原始数据传入，由子组件处理成其它数据输出。

对这两种情况，正确的应对方式是：

定义一个局部变量，并用 prop 的值初始化它：

props: ['initialCounter'],

data: function () {

return { counter: this.initialCounter }

}

定义一个计算属性，处理 prop 的值并返回：

props: ['size'],

computed: {

normalizedSize: function () {

return this.size.trim().toLowerCase()

}

}

注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。

举个例子：

//

var mycom = Vue.component('my-component', {

//添加一个input改变子组件的childOject，那么父元素的object也会被改变，但是Vue没有报错！

template: '

{{ object.name }} is {{ object.age }} years old.

',

props: ['object','school'],

data: function () {

// 子组件的childObject 和 父组件的object 指向同一个对象

return {

childObject: this.object

}

}

});

var app3 = new Vue({

el: '#app3',

data: {

object:{

name: 'Xueying',

age: '21',

},

school:'SCUT',

},

})

图2-改变childObject.name，object.name也改变

图3-控制台输出app3.object.name

4. props验证

可以为prop指定验证规则，如果传入的数据不符合要求，Vue会发出警告。

具体验证规则见官方文档：Prop验证规则

5. $parent

$parent 也可以用来访问父组件的数据。

而且子组件可以通过$parent 来直接修改父组件的数据，不会报错！

可以使用props的时候，尽量使用props显式地传递数据(可以很清楚很快速地看出子组件引用了父组件的哪些数据)。

另外在一方面，直接在子组件中修改父组件的数据是很糟糕的做法，props单向数据流就没有这种顾虑了。

以上所述是小编给大家介绍的Vue中props的详解详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持！

Vue组件选项props实例详解

前面的话

组件接受的选项大部分与Vue实例一样，而选项props是组件中非常重要的一个选项。在 Vue 中，父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。本文将详细介绍Vue组件选项props

静态props

组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，需要通过子组件的 props 选项

使用Prop传递数据包括静态和动态两种形式，下面先介绍静态props

子组件要显式地用 props 选项声明它期待获得的数据

var childNode = {

template: '

',

props:['message']

}

静态Prop通过为子组件在父组件中的占位符添加特性的方式来达到传值的目的

var childNode = {

template: '

',

props:['message']

}

var parentNode = {

template: `

components: {

'child': childNode

}

};

// 创建根实例

new Vue({

el: '#example',

components: {

'parent': parentNode

}

})

命名约定

对于props声明的属性来说，在父级HTML模板中，属性名需要使用中划线写法

var parentNode = {

template: `

components: {

'child': childNode

}

};

子级props属性声明时，使用小驼峰或者中划线写法都可以；而子级模板使用从父级传来的变量时，需要使用对应的小驼峰写法

var childNode = {

template: '

',

props:['myMessage']

}

var childNode = {

template: '

',

props:['my-message']

}

动态props

在模板中，要动态地绑定父组件的数据到子模板的 props，与绑定到任何普通的HTML特性相类似，就是用 v-bind。每当父组件的数据变化时，该变化也会传导给子组件

var childNode = {

template: '

',

props:['myMessage']

}

var parentNode = {

template: `

components: {

'child': childNode

},

data(){

return {

'data1':'aaa',

'data2':'bbb'

}

}

};

传递数字

初学者常犯的一个错误是使用字面量语法传递数值

var childNode = {

template: '

',

props:['myMessage'],

computed:{

type(){

return typeof this.myMessage

}

}

}

var parentNode = {

template: `

components: {

'myChild': childNode

}

};

// 创建根实例

new Vue({

el: '#example',

components: {

'MyParent': parentNode

}

})

因为它是一个字面 prop，它的值是字符串 "1" 而不是 number。如果想传递一个实际的 number，需要使用 v-bind，从而让它的值被当作JS表达式计算

var parentNode = {

template: `

components: {

'myChild': childNode

}

};

或者可以使用动态props，在data属性中设置对应的数字1

var parentNode = {

template: `

components: {

'myChild': childNode

},

data(){

return {

'data': 1

}

}

};

props验证

可以为组件的 props 指定验证规格。如果传入的数据不符合规格，Vue会发出警告。当组件给其他人使用时，这很有用

要指定验证规格，需要用对象的形式，而不能用字符串数组

Vue.component('example', {

props: {

// 基础类型检测 (`null` 意思是任何类型都可以)

propA: Number,

// 多种类型

propB: [String, Number],

// 必传且是字符串

propC: {

type: String,

required: true

},

// 数字，有默认值

propD: {

type: Number,

default: 100

},

// 数组/对象的默认值应当由一个工厂函数返回

propE: {

type: Object,

default: function () {

return { message: 'hello' }

}

},

// 自定义验证函数

propF: {

validator: function (value) {

return value > 10

}

}

}

})

type 可以是下面原生构造器

String

Number

Boolean

Function

Object

Array

Symbol

type 也可以是一个自定义构造器函数，使用 instanceof 检测。

当 prop 验证失败，Vue 会在抛出警告 (如果使用的是开发版本)。props会在组件实例创建之前进行校验，所以在 default 或 validator 函数里，诸如 data、computed 或 methods 等实例属性还无法使用

下面是一个简单例子，如果传入子组件的message不是数字，则抛出警告

var childNode = {

template: '

',

props:{

'message':Number

}

}

var parentNode = {

template: `

components: {

'child': childNode

},

data(){

return{

msg: '123'

}

}

};

// 创建根实例

new Vue({

el: '#example',

components: {

'parent': parentNode

}

})

传入数字123时，则无警告提示。传入字符串'123'时，结果如下所示

将上面代码中，子组件的内容修改如下，可自定义验证函数，当函数返回为false时，则输出警告提示

var childNode = {

template: '

',

props:{

'message':{

validator: function (value) {

return value > 10

}

}

}

}

在父组件中传入msg值为1，由于小于10，则输出警告提示

var parentNode = {

template: `

components: {

'child': childNode

},

data(){

return{

msg:1

}

}

};

单向数据流

prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解

另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着不应该在子组件内部改变 prop。如果这么做了，Vue 会在控制台给出警告

下面是一个典型例子

var childNode = {

template: `

`,

props:['childMsg']

}

var parentNode = {

template: `

`,

components: {

'child': childNode

},

data(){

return {

'msg':'match'

}

}

};

// 创建根实例

new Vue({

el: '#example',

components: {

'parent': parentNode

}

})

父组件数据变化时，子组件数据会相应变化；而子组件数据变化时，父组件数据不变，并在控制台显示警告

修改prop中的数据，通常有以下两种原因

1、prop 作为初始值传入后，子组件想把它当作局部数据来用

2、prop 作为初始值传入，由子组件处理成其它数据输出

对于这两种情况，正确的应对方式是

1、定义一个局部变量，并用 prop 的值初始化它

props: ['initialCounter'],

data: function () {

return { counter: this.initialCounter }

}

2、定义一个计算属性，处理 prop 的值并返回

props: ['size'],

computed: {

normalizedSize: function () {

return this.size.trim().toLowerCase()

}

}

[注意]JS中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态

总结

以上所述是小编给大家介绍的Vue组件选项props实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持！

以上就是本次给大家分享的关于java的全部知识点内容总结，大家还可以在下方相关文章里找到相关文章进一步学习，感谢大家的阅读和支持。