一、父组件间传值
- 父组件向子组件传递数据：通过属性传递数据；子组件接收数据：通过props
<!DOCTYPE html>
<html>
<head>
<title>组件</title>
<script type="text/javascript" src="./vue-dev.js"></script>
</head>
<body>
<div id="app">
<child-item :content="message"></child-item>
</div>
<script type="text/javascript">
Vue.component('child-item', {
props: ["content"],
template: '<div>{{content}}</div>',
})
var vm = new Vue({
el: '#app',
data() {
return {
message: '显示时间' + new Date().toLocaleString()
}
},
methods: {
}
})
</script>
</body>
</html>
props的讲解：
1. 可以接收一个数组 ，多个属性 ['属性1','属性2']
2. 可以是对象，指定传递进来的属性类型
Vue.component('childItem',{
props:{
//props可以是对象，实现组件参数的校验
content:String , //指定父组件传递过来的参数的类型
summary:[String,Number] ,//可以接收两种类型,
ext:{
type:String,
required:true,
default:'设置默认值',
validator:function (value) { //校验器，校验文本长度必须大于5
return(value.length > 5);
}
}
},
template:'<div>{{content}}</div>'
});
注意： 不要直接修改父组件传递过来的数据，可以通过在data中声明属性，接收父组件传递过来的内容
二、Vue单向数据流
单向数据流：父组件可以向子组件通过属性形式传递参数，传递的参数也可以随时随意修改；但子组件不能修改父组件传递过来的参数，只能使用父组件传递的数据
如：
Vue.component('child-item', {
props: ["content"],
template: '<div @click="addContent">{{content}}</div>',
methods:{
addContent:function(){
this.content += '我不能直接被修改'
}
}
})
出错:
正确写法： 将接收到的数据复制一份放在子组件定义的data里summary
Vue.component('child-item', {
props: ["content"],
template: '<div @click="addContent">{{summary}}</div>',
data(){
return{
summary:this.content
}
},
methods:{
addContent:function(){
this.summary += '我可以直接被修改'
}
}
})
三、子组件向父组件传递数据
- **子组件向父组件传递数据：通过事件方式传递数据；子组件通过$emit(‘方法名’，步长) 方式对外传递事件，父组件通过对事件的监听，接收数据
<!DOCTYPE html>
<html>
<head>
<title>组件</title>
<script type="text/javascript" src="./vue-dev.js"></script>
</head>
<body>
<div id="app">
<child-item :content="message" @change="handleChangeEvent"></child-item>
</div>
<script type="text/javascript">
Vue.component('child-item', {
props: ["content"],
template: '<div @click="addContent">{{content}}</div>',
data(){
return{
summary:this.content
}
},
methods:{
addContent:function(){ //对外传递事件
this.$emit('change','后缀ext')
}
}
})
var vm = new Vue({
el: '#app',
data() {
return {
message: '显示时间' + new Date().toLocaleString()
}
},
methods: {
//监听事件，接收数据
handleChangeEvent:function(step){
this.message +=step;
}
}
})
</script>
</body>
</html>
