qt5 中父子窗体数值传递_（五）Vue父子组件通信

先写一个测试的父组件和子组件，并且注册和使用组件，组件必须在使用的时候先注册components，然后直接使用<标签>即可使用

 <div id="app"> 
 </div>
 
 <script> 
     var Child = {
          template:`
                <div>我是子组件<div>
            `
     }  
     var Parent = {
         components:{
            Child
         },
         template:`
                <div>我是父组件<div>
                <child></child>
            `
     }   
     new Vue({
         el:'#app',
         components:{
             Parent
         },
         template:`
                <div>我是主页<div>
                <parent></parent>
            `
     })
 </script>

显示结果：

好了，基础工作做好了！下面进入父子组件通信环节。

父组件传递给子组件

首先在父组件中定义pmsg，将pmsg值传递给子组件

在parent中定义pmsg

data(){
    return{
        pmsg:'我是父组件的信息'
    }
}

在child中声明属性receivepmas，用于接收父组件传来的数据

props:['receivepmas']

parent组件中的child标签中使用， :receivepmas 为child中声明的属性，pmsg是parent定义的参数，将pmsg的值传递给child的receivepmas 属性

<child :receivepmas='pmsg'></child>

显示结果：发现父组件pmsg值已传递给子组件的receivepmas，并且成功显示！

子组件传递给父组件

首先在child组件中，定义触发事件，使用this.$emit('自定义事件名',变量)

看一下例子，在child组件最后增加一个按钮，通过一个button来触发事件

<button @click='send'>将数据‘我是子组件的信息’传递给父组件</button>

在child组件方法中增加send方法，触发事件sendp，用于传递子组件数据

send(){
    this.$emit('sendp','我是子组件的信息')
}

在parent组件中，监听事件sendp，在<child>标签中使用，@事件名=‘父组件中方法’

<child :receivepmas='pmsg' @sendp='receivechild'></child>

在parent组件中定义新的属性receivecmsg，并在页面中使用{{receivecmsg}}显示

template:`
    div>我是父组件<div>
    <h3>{{ receivecmsg }} </h3>
    <child :receivepmas='pmsg' @sendp='receivechild'></child>
`

定义receivechild方法，将监听子组件中sendp事件，并接收传递过来参数值，并赋值给receivecmsg

 receivechild(val){
     this.receivecmsg =val
 }

显示结果：

接着我们点击按钮，查看结果

我们通过按钮出发了子组件的sendp事件，父组件使用receivechild监听sendp事件，并将传递过来的变量值‘我是子组件信息’传递给receivecmsg属性，并成功在页面上显示。

下面将开始学习一下vue-router路由器！