5.vue组件间的数值传递（父子）

VUE父子组件的关系可以总结为 props down, events up 。

//父组件 newslist 
<template >
 <div class="tmp1">  
         <newsshow :parentMessage="parentMessage"  @childEvent="parentMethod"  ></newsshow>
    ----  :parentMessage="parentMessage"  就是  v-bind:parentMessage="parentMessage"    
      然后子组件props: ['parentMessage'],就可以拿到父组件的parentMessage变量了

    ----  @childEvent="parentMethod"  就是  v-on:childEvent="parentMethod"  
      然后父组件定义一个  parentMethod  函数来处理子组件传递来内容
     this.$emit('childEvent', { name: 'wsh', age:  10 }); ---通过$emit给父组件传递内容
  </div>    
</template>

<script>
    import newsshow from './newsshow';
    export default{             
        data(){
             return {
                parentMessage:'我是来自父组件的消',      
           }
        },

       methods:{        
        parentMethod({ name, age }) {
           console.log( name, age); ---打印出子组件传递来内容
         }
       },
        components:{
            newsshow
        },   

    }

</script>

<style scoped>
    .mui-table-view span{
        position: absolute;
        top: 27px;
        right: 0;
    }
    .mui-table-view .mui-ellipsis{
        margin-top: 10px;
    }
</style>

//子组件 newsshow
<template> 
            <div> 
               <h3>我是子组件一</h3> 
                <span>{{parentMessage}}</span>   ----渲染父组件传递过来的内容
                <textarea ref="commentContent" placeholder="请输入要评论的内容..">111</textarea>
            </div>

</template>

 <script>
     export default{ 
        props: ['parentMessage'],    -----管道，获取父组件的内容 
        mounted() {
          this.$emit('childEvent', { name: 'wsh', age:  10 }); ---通过$emit传递给父组件内容
          var txt = this.$refs.commentContent.value; ---获取textarea 文本框的内容，打印出来
          console.log(txt)          
       },

     }; 

 </script>

  <style scoped>

   </style>

https://www.jianshu.com/p/649929d88699