vue官网prop
父组件中引入子组件
<template>
<div class="home">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'home',
components: {
HelloWorld
}
}
</script>
父组件向子组件传递参数
上面案例中 msg 参数就是向子组件传递的参数,子组件接收参数,也可以接收方法
子组件接收参数的类型
1、数组模式,不校验任何接收过来的数据类型
props: ['postTitle']
2、只校验类型
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise
}
3、校验类型和默认值
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
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 ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
父组件主动获取子组件的数据和方法:
1.调用子组件的时候定义一个ref
<v-header ref="header"></v-header>
2.在父组件里面通过
this.$refs.header.属性
this.$refs.header.方法
<template>
<div id="home">
<v-header ref="header"></v-header>
<hr>
<button @click="getChildData()">获取子组件的数据和方法</button>
</div>
</template>
<script>
import Header from './Header.vue';
export default{
components:{
'v-header':Header
},
methods:{
getChildData(){
//父组件主动获取子组件的数据和方法:
// alert(this.$refs.header.msg);
this.$refs.header.run();
}
}
}
</script>
子组件主动获取父组件的数据和方法:
this.$parent.数据
this.$parent.方法
<template>
<div>
<h2>我是头部组件</h2>
<button @click="getParentData()">获取子组件的数据和方法</button>
</div>
</template>
<script>
export default{
data(){
return{
msg:'子组件的msg'
}
},
methods:{
getParentData(){
// alert(this.$parent.msg);
//this.$parent.run();
}
}
}
</script>
非父子组件之间传值
1、注册广播
import Vue from 'vue';
var VueEvent = new Vue()
export default VueEvent;
2、在非父子组件中引用
3、发送数据
VueEvent.$emit('to-home',this.msg)
4、接收数据
VueEvent.$on('to-home',function(data){
console.log(data);
})
5、案例:
<template>
<div id="news">
<button @click="emitHome()">给Home组件广播数据</button>
<br>
</div>
</template>
<script>
//引入 vue实例
import VueEvent from '../model/VueEvent.js';
export default{
data(){
return {
msg:'我是一个新闻组件'
}
},
methods:{
emitHome(){
//广播
VueEvent.$emit('to-home',this.msg)
}
},
mounted(){
VueEvent.$on('to-news',function(data){
console.log(data);
})
}
}
</script>
<template>
<!-- 所有的内容要被根节点包含起来 -->
<div id="home">
<button @click="emitNews()">给News组件广播数据</button>
</div>
</template>
<script>
import VueEvent from '../model/VueEvent.js';
export default{
data(){
return {
msg:'我是一个home组件',
title:'首页111'
}
},methods:{
emitNews(){
//广播数据
VueEvent.$emit('to-news',this.msg)
}
},
mounted(){
//监听news 广播的数据
VueEvent.$on('to-home',function(data){
console.log(data);
})
}
}
</script>