[Vue] 04 - Parameter Passing

点击进入下一个界面:父组件传参到子组件


一、导入主页面

App.vue 调用主组件 v-home。(没啥重难点)

<template>
  <div id="app">
     <v-home></v-home>
  </div>
</template>


<script>
   import Home from './components/Home.vue';

   export default {
      data () {
        return {
          msg:'你好vue'
        }
      },
      components:{      /*前面的组件名称不能和html标签一样*/
        'v-home':Home,
      }
    }
</script>

<style lang="scss">
</style>

 

 

二、主页面(传递参数)

实际页面的模板,主页面给头部组件 “传递参数”:变量 + 方法 都可以传递。

<template>
    <!-- 所有的内容要被根节点包含起来 -->
    <div id="home">

        <v-header :title="title" :homemsg='msg' :run="run" :home="this"></v-header>
        <hr>
         首页组件

    </div>
</template>


<script>
/*
父组件给子组件传值

    1.父组件调用子组件的时候 绑定动态属性
        <v-header :title="title"></v-header>
    2、在子组件里面通过 props接收父组件传过来的数据
*/
    import Header from './Header.vue';

    export default{
        data(){
            return {
                msg:'我是一个home组件',
                title:'首页111'
            }
        },
        components:{

            'v-header':Header
        },
        methods:{

            run(data){
                alert('我是Home组件的run方法'+data);
            }
        }
    }
</script>

<style lang="scss" scoped>
    /*css  局部作用域  scoped*/
    h2{
        color:red
    }
</style>

 

 

三、子组件(接收参数)

  • 接收参数

利用参数内容为我所用。

“子组件” 执行run()的两种方式(1)直接调用;(2)通过传入的父类this 调用run()。

另外,通过$parent调用也可以。

<template>
    <div>
        <h2>我是头部组件--{{title}}---{{homemsg}}</h2>

        <button @click="run('123')">执行父组件的方法</button>

        <br />
        <br />

        <button @click="getParent()">获取父组件的数据和方法</button>
    </div>
</template>


<script>

export default{

    data(){

        return{
            msg:'子组件的msg'
        }
    },
    methods:{
        getParent(){
            // alert(this.title)
            // alert(this.home.title)

            this.home.run()
        }

    },
    props:['title','homemsg','run','home']  // <-------------------- 参数
}

</script>

 

  • 验证合法性

父组件 ----> 子组件 (传值):

1.父组件调用子组件的时候 绑定动态属性
            <v-header :title="title"></v-header>

2、在子组件里面通过 props接收父组件传过来的数据,可顺便验证合法性。
            props:['title']
            props:{
                'title':String
            }

3.直接在子组件里面使用

 

 

 

 

点击返回上一个界面:子组件传参给父组件


一、父页面

父组件主动获取子组件的“数据”和“方法”。

借助 ref 属性,作为钩子。

<template>
    <!-- 所有的内容要被根节点包含起来 -->
    <div id="home">
        <v-header ref="header"></v-header>
        <hr>
         首页组件
         <button @click="getChildData()">获取子组件的数据和方法</button>
    </div>
</template>


<script>
/* ----------------------------------------------------------------- 父组件 <---- 子组件 (数据和方法): 1.调用子组件的时候定义一个ref <v-header ref="header"></v-header> 2.在父组件里面通过 this.$refs.header.属性 this.$refs.header.方法 子组件主动获取父组件的数据和方法: this.$parent.数据 this.$parent.方法
----------------------------------------------------------------- */
import Header from './Header.vue'; export default{ data(){ return { msg:'我是一个home组件', title:'首页111' } }, components:{ 'v-header':Header }, methods:{ run(){ alert('我是Home组件的run方法'); }, getChildData(){ // 父组件主动获取子组件的数据和方法: alert(this.$refs.header.msg); this.$refs.header.run(); } } } </script> <style lang="scss" scoped> /*css 局部作用域 scoped*/ h2{ color:red } </style>

 

 

二、子组件

子组件代码。(这里使用$parent让父组件获得子组件内容)

<template>
    <div>
        <h2>我是头部组件</h2>
        <button @click="getParentData()">获取子组件的数据和方法</button>
    </div>
</template>


<script>
export default{

    data(){
        return{
            msg:'子组件的msg'
        }
    },
    methods:{

        run(){
            alert('我是子组件的run方法')
        },
        getParentData(){
            /*
              子组件主动获取父组件的数据和方法:

              this.$parent.数据
              this.$parent.方法
            */

            // alert(this.$parent.msg);
            this.$parent.run();
        }
    }
}

 

 

 

 

"兄弟组件"之间传值


一、逻辑结构

另一种较好的方案:vue $emit的使用

  

 

二、UI 结构

上下两个兄弟组件。

<template>
  <div id="app">
    <v-home></v-home>

    <br>
    <hr>
    <br>
    <v-news></v-news>
  </div>
</template>

<script>

  /*非父子组件传值
    1、新建一个js文件   然后引入vue  实例化vue  最后暴露这个实例
    2、在要广播的地方引入刚才定义的实例
    3、通过 VueEmit.$emit('名称','数据')
    4、在接收收数据的地方通过 $om接收广播的数据

      VueEmit.$on('名称',function(){

      })
  */

  import Home from './components/Home.vue';
  import News from './components/News.vue';

  export default {
     data () {
       return {

        msg:'你好vue'
       }
     },
     components:{   /*前面的组件名称不能和html标签一样*/
       'v-home':Home,
       'v-news':News
     }

  }
</script>

<style lang="scss">
</style>
代码实现

 

 

三、广播

  • 定义一根总线

VueEvent.js 中定义了一个总线:VueEvent

import Vue from 'vue';

var VueEvent = new Vue()

export default VueEvent;

 

  • Home.vue

(a) 使用 $emit广播,有msg标签,例如:'to-news','to-home'。

(b) 使用 $on监听广播,自然是mounted()时就同步开启。

<template>
    <!-- 所有的内容要被根节点包含起来 -->
    <div id="home">

       我是首页组件

       <br>
       <button @click="emitNews()">给News组件广播数据</button>
       <br>

    </div>
</template>


<script>
    //引入 vue实例
    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>

<style lang="scss" scoped>
</style>

 

  • News.vue

 通过 $on 接收msg。

<template>
    <div id="news">
        我是新闻组件
        <br>
        <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>

<style lang="scss" scoped>
</style>

 

End.

posted @ 2020-08-14 10:15  郝壹贰叁  阅读(90)  评论(0编辑  收藏  举报