<body>
父组件通过属性向子组件传递值
当使用:count时，其值为数字类型，否则为字符
<div id="app">
<counter :count="0" @change="handleChange"></counter>
<counter :count="1" @change="handleChange"></counter>
<h3>{{total}}</h3>
</div>
</body>
<script>
//渲染路径
// 父组件count属性+值
// 子组件props：count
//子组件模板{{count}}
// 子组件通过props来接收值
var counter = {
props: ['count'],
template: '<div @click="handleClick">{{num}}</div>',
data: function(){
return {
num: this.count,
}
},
//子组件修改父组件传递内容过程
//设置额外参数num
//模板使用num
methods: {
// 父组件可以随意向子组件传递参数，但子组件不可修改父组件传递内容，否则warning
//|单向数据流
//当子组件打算修改父组件的内容时，可以通过设置额外参数实现数据传递
handleClick: function () {
this.num++;
//$emit方法用于监听子组件，1代表向外传递的数据
this.$emit('change', 1);
}
}
};
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue',
total: 1,
},
components: {
counter: counter,
},
methods: {
// 参数代表$emit方法方法中所携带的数据
handleChange: function (step) {
this.total += step;
}
}
})
</script>
组件参数校验可以自定义传入参数的类型。
例子：
<body>
<div id="app">
<child content="Hello"></child>
</div>
</body>
<script>
Vue.component('child', {
// 属性， 字符串 多种类型
//props : ['content'], {content: String},{content: [String, Number]}
//对象
// content: {type: String},
props: {
content: {
type: String,
required: true, //必填字段
default: 'Hello Vue', // 默认值
/*validate: function (value) {
校验器
}*/
},
},
template: '<div>{{content}}</div>'
})
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue',
}
})
</script>
props对于参数的传递和类型指定有多种写法。
props特性：指在props中写明了属性，并在组件中为此属性赋予了值，就是使用了props中的参数。
非props特性：在dom中为属性赋予了值，但是在组件的props中没有此属性，因此在经过浏览器渲染后，依然保留了属性。
比如：<child content="hello"></child>-----><div content="hello"></div>
评论列表
已有0条评论