一、父组件向子组件传值 通过属性props 因为父组件在模板中或者控制的区域要使用子组件,可通过属性直接赋值
1.在子组件中声明props 属性 定义要接收数据的属性名称
2.父组件在使用子组件标签时 通过动态绑定对应的属性 进行赋值(传值)
3.那么在子组件中 模板内 可以随便使用该属性,使用方式和Data中的变量数据一样!
△△△:定义props属性的时候可以使用[]数组形式定义[‘msg’,‘arr’],也可以使用对象形式{ msg:String }对象形式可以进行“类型约束” 还有一种 属性名再对应一个对象 进行更多的约束扩展props: { msg: { type:String,default:"–",validator:function(value){ }… } }
☆:Vue组件注册在什么地方,什么地方就是它的父组件。 const a=vueExtend({}) 组件构造器a 被注册到了 Vue实例中 那么Vue实例就是a的父组件,a就是子组件。 父组件在使用a组件标签的时候 就可以通过属性的方式进行传值
props: {
// fooA只接受数值类型的参数
fooA: Number,
// fooB可以接受字符串和数值类型的参数
fooB: [String, Number],
// fooC可以接受字符串类型的参数,并且这个参数必须传入
fooC: {
type: String,
required: true
},
// fooD接受数值类型的参数,如果不传入的话默认就是100
fooD: {
type: Number,
default: 100
},
// fooE接受对象类型的参数
fooE: {
type: Object,
// 当为对象类型设置默认值时必须使用函数返回
default: function(){
return { message: 'Hello, world' }
}
},
// fooF使用一个自定义的验证器
fooF: {
validator: function(value){
return value>=0 && value<=100;
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="../JS/vue.js"></script>
</head>
<body>
<!-- 被vm 实例所控制的区域 -->
<div id="app">
<!-- <cpn :cmessage="message"></cpn> -->
<cpn :cmessage="message"></cpn>
<cpn :cmovies="movices"></cpn>
<cpn :msg="num"></cpn>
</div>
<template id="cpn">
<div>
<p>{{cmessage}}</p>
<!-- 在子组件中绑定了父组件中的数据 -->
<ul v-for="item in cmovies">
<li>{{item}}</li>
</ul>
<p>{{msg}}</p>
</div>
</template>
<script>
//创建一个子组件
const cpn = Vue.extend({
template: "#cpn",
data() {
return {
}
},
methods: {
},
//1.通过数组声明 父组件要传来属性的名称
// props:["cmessage"]
//2.通过对象的形式声明属性列表 (做类型约束)
// props:{
// cmessage:String
// }
//3.对象形式对属性名称进一步“约束扩展”
props: {
cmessage: {
type: String,
default: "--",
//父组件必须对我这个属性传值
require: false
},
cmovies: {
//object 和 Array 类型的默认值需要从工厂函数中设置 也就是 在函数内部返回
type: Array,
default() {
return ["电影1", "电影2"]
}
},
msg: {
type:Number,
//return true 正常显示
validator: function (value) {
return value >= 0 && value <= 100;
// return true 不校验 直接显示
}
}
}
})
// 创建实例对象(根组件)
//父组件向子组件传值 通过属性props 因为父组件在模板中或者控制的区域 要使用子组件<cpn prop=" ... "></cpn>通过属性 直接赋值
const vm = new Vue({
// 指定控制的区域
el: '#app',
data: {
message: "sdwm",
movices: ["战狼二", "绝地逃亡", "宝贝计划", "百变星君"],
num:150
},
methods: {},
components: {
cpn
}
});
</script>
</body>
</html>
二、子组件通过自定义事件向父组件传值:
实现:子组件通过事件向父组件传值 父组件通过在子组件标签内监听对应的事件 来获取其子组件传来的数据