vue组件获取props_Vue组件选项props

前面的话

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

父子级组件

在介绍props之前，先介绍父子级组件的写法

在一个良好定义的接口中尽可能将父子组件解耦是很重要的。这保证了每个组件可以在相对隔离的环境中书写和理解，也大幅提高了组件的可维护性和可重用性

【错误写法】

现在来介绍两种父子级组件的错误写法

下面这种形式的写法是错误的，因为当子组件注册到父组件时，Vue.js会编译好父组件的模板，模板的内容已经决定了父组件将要渲染的HTML

...运行时，它的一些子标签只会被当作普通的HTML来执行，不是标准的HTML标签，会被浏览器直接忽视掉

在父组件标签之外使用子组件也是错误的

【正确写法】

var childNode = {

template: '

childNode

',

}

var parentNode = {

template: `

`,

components: {

'child': childNode

}

};

// 创建根实例

new Vue({

el: '#example',

components: {

'parent': parentNode

}

})

静态props

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

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

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

var childNode = {

template: '

{ {message}}

',

props:['message']

}

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

var childNode = {

template: '

{ {message}}

',

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 = {<