vue 组件传值

 

 

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>