组件接受的选项大部分与Vue实例一样,而选项道具是组件中非常重要的一个选项。在Vue中,父子组件的关系可以总结为道具,事件。父组件通过道具向下传递数据给子组件,子组件通过事件给父组件发送消息。本文将详细介绍Vue组件选项道具
组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据,需要通过子组件的道具选项
使用道具传递数据包括静态和动态两种形式,下面先介绍静态道具
子组件要显式地用道具选项声明它期待获得的数据
var childNode={
模板:“& lt; div>{{消息}}& lt;/div>”,
道具(“信息”):
}
静态支撑通过为子组件在父组件中的占位符添加特性的方式来达到传值的目的
& lt; div id=袄印北?
& lt; parent> & lt;/parent>
& lt;/div>
& lt; script>
var childNode={
模板:“& lt; div>{{消息}}& lt;/div>”,
道具(“信息”):
}
var parentNode={
模板:
& lt; div类=案浮北?
& lt;孩子消息=" aaa "祝辞& lt;/child>
& lt;孩子消息=" bbb "祝辞& lt;/child>
& lt;/div>”
组件:{
“孩子”:childNode
}
};//创建根实例
新Vue ({
埃尔:“#例子”,
组件:{
“父母”:parentNode
}
})
& lt;/script>
对于道具声明的属性来说,在父级HTML模板中,属性名需要使用中划线写法
var parentNode={
模板:
& lt; div类=案浮北?
& lt;孩子我的信息=" aaa "祝辞& lt;/child>
& lt;孩子我的信息=" bbb "祝辞& lt;/child>
& lt;/div>”
组件:{
“孩子”:childNode
}
};
子级道具属性声明时,使用小驼峰或者中划线写法都可以,而子级模板使用从父级传来的变量时,需要使用对应的小驼峰写法
var childNode={
模板:“& lt; div> {{myMessage}} & lt;/div>”,
道具(“myMessage”):
}
var childNode={
模板:“& lt; div> {{myMessage}} & lt;/div>”,
道具(“我的信息”):
}
在模板中,要动态地绑定父组件的数据到子模板的道具,与绑定到任何普通的HTML特性相类似,就是用v-bind。每当父组件的数据变化时,该变化也会传导给子组件
var childNode={
模板:“& lt; div> {{myMessage}} & lt;/div>”,
道具(“myMessage”):
}
var parentNode={
模板:
& lt; div类=案浮北?
& lt;孩子:我的信息=" data1 "祝辞& lt;/child>
& lt;孩子:我的信息=" data2”祝辞& lt;/child>
& lt;/div>”
组件:{
“孩子”:childNode
}，
数据(){
返回{
“data1”:“aaa”,
“data2”:“bbb”
}
}
};
初学者常犯的一个错误是使用字面量语法传递数值
& lt; !——传递了一个字符串“1”——比;
& lt; comp some-prop=?”祝辞& lt;/comp>
& lt; div id=袄印北?
& lt; my-parent> & lt;/my-parent>
& lt;/div>
& lt; script>
var childNode={
模板:“& lt; div> {{myMessage}}的类型是{{类型}}& lt;/div>”,
道具:[' myMessage '),
计算:{
类型(){
返回typeof this.myMessage
}
}
}
var parentNode={
模板:
& lt; div类=案浮北?
& lt;我的孩子我的信息=" 1 "祝辞& lt;/my-child>
& lt;/div>”
组件:{
“myChild”: childNode
}
};//创建根实例
新Vue ({
埃尔:“#例子”,
组件:{
“MyParent”: parentNode
}
})
& lt;/script>
因为它是一个字面支撑,它的值是字符串“1”而不是号码。如果想传递一个实际的号码,需要使用v-bind,从而让它的值被当作JS表达式计算
& lt; !——传递实际的数字——比;
& lt; comp v-bind: some-prop=" 1 "祝辞& lt;/comp>
var parentNode={
模板:
& lt; div类=案浮北?
& lt;我的孩子:我的信息=" 1 "祝辞& lt;/my-child>
& lt;/div>”
组件:{
“myChild”: childNode
}
