Vue props 单向数据流
1、props通信
注意:DOM模板的驼峰命名props要转为短横分割命名。
创键组件
两种方式:
方法一:使用Vue.extend({})
var component = Vue.extend({
template: '<div>component</div>'
});
// 里面还可以添加其他的属性
方法二:使用字面量
var component = {
template: '<div>component</div>'
}
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Vue</title>
</head>
<body>
<div id="app">
<my-component message='来自父组件的数据' warning-text="提示信息"></my-component>
</div>
<script src="http://www.itcinternet.net/uploads/allimg/190510/2206454612-0.jpg"></script>
<script type="text/javascript">
Vue.component('my-component', {
template: '<div>{{warningText}}:{{message}}</div>',
props: ['message', 'warningText']
})
new Vue({
el: "#app"
})
</script>
</body>
</html>
注册组件
全局注册
语法:
Vue.component('my-component', {
// 选项
})
示例:
// 创建组件
var component = {template: '<div>component</div>'}
// 全局注册组件
Vue.component('my-component', component);
局部注册
// 创建组件
var component = {template: '<div>component</div>'}
// 在 Vue组件实例内注册component组件,该组件只能在该实例中使用
var vm = new Vue({
el: '#app',
components: {
'mycomponent ': component ,
}
})
传递动态数据(v-bind):
注意点:
- HTML 特性是不区分大小写的。所以,当使用的不是字符串模版,camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名:
Vue.component('child', {
// camelCase in JavaScript
props: ['myMessage'], // 这里使用的是驼峰式命名
template: '{{ myMessage }}'
})
// 在下面的HTML文件中引用时,需要改为kebab-case的形式,也就是短横线隔开
<child my-message="hello!"></child>
威尼斯wns.9778官网活动,如果你使用字符串模版,则没有这些限制。
注意(谨记):在HTML中,属性是不区分大小写的,例如:class、Class或CLASS都是表示class,因此,当在Vue中使用props向子组件传递数据时,如果props是驼峰式命名,那么在HTML文件中使用时,需要修改为kebab-case(短横线隔开式或称为烤肉串)的形式,否则,Vue将会无法解析
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Vue</title>
</head>
<body>
<div id="app">
<input type="text" v-model="parentMessage" />
<my-component :message='parentMessage'></my-component>
</div>
<script src="http://www.itcinternet.net/uploads/allimg/190510/2206454612-0.jpg"></script>
<script type="text/javascript">
Vue.component('my-component', {
template: '<div>{{message}}</div>',
props: ['message']
})
new Vue({
el: "#app",
data: {
parentMessage: ''
}
})
</script>
</body>
</html>
使用props传递数据
Vue.component('child', {
// 声明 props
props: ['message'],
// 就像 data 一样,prop 可以用在模板内
// 同样也可以在 vm 实例中像“this.message”这样使用
template: '{{ message }}'
})
// 通过下面这种方式传递数据
<child message="hello!"></child>
2、单向数据流
动态prop
将父组件的数据通过v-bind
绑定到子组件上,与绑定HTML特性是一样的;每当父组件的数据变化都会反映到子组件上
<div>
<input v-model="parentMsg">
<br>
<child v-bind:my-message="parentMsg"></child>
</div>
(1)子组件保存父组件传递过来的值,在子组件自己的作用域下修改和使用。
字面量语法 VS 动态语法
初学者常犯的一个错误是使用字面量语法传递数值:
<!-- 传递了一个字符串 "1" -->
<comp some-prop="1"></comp>
因为它是一个字面 prop,它的值是字符串 "1" 而不是 number。如果想传递一个实际的 number,需要使用 v-bind,从而让它的值被当作 JavaScript 表达式计算:
<!-- 传递实际的 number -->
<comp v-bind:some-prop="1"></comp>
通过v-bind:some-props="1"
传递的是一个number,而通过some-prop="1"
传递的是一个
字符串
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Vue</title>
</head>
<body>
<div id="app">
<my-component :init-count='1'></my-component>
</div>
<script src="http://www.itcinternet.net/uploads/allimg/190510/2206454612-0.jpg"></script>
<script type="text/javascript">
Vue.component('my-component', {
template: '<div>{{initCount}}</div>',
props: ['initCount'],
data: function() {
return this.initCount
}
})
new Vue({
el: "#app"
})
</script>
</body>
</html>
props数据校验
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
}
}
}
});
注意:props会在组件实例创建之前进行校验,所以在default、validator函数里,诸如:data
,
computed
或methods
等实例属性都无法使用
(2)使用计算属性
非props特性传递
在Vue中,在大多数情况下,传递给组件的值会覆盖组件本身就设定的值,例如传递type=large
会覆盖组件上的type=small
,且有可能破坏该组件,但是,对于class和style特性在传递时,不会发生覆盖,只会合并,假如组件上class=one
,又传递class=two
,则最终组件的class= one two
;
本文由威尼斯wns.9778官网活动发布于计算机教程,转载请注明出处:Vue props 单向数据流
关键词: