zoukankan      html  css  js  c++  java
  • 5、vue的传值 (1)

    1-父组件向子组件  -父组件向孙子组件传值(属性传值)

    //父组件
    <template> <div id='app'> <headera v-bind:hea="hea" v-bind:mas="mas" :use="use"></headera> //v-bind绑定属性 </div> </template> <script> import Headera from './components/Headera' export default { name: 'App', data () { return { mas: '我是父组件zhi(祖先)', msga:'app原有的值contenet', hea: '我是父亲传给head', use: ["tom","lili","jary"], } }, components: { 'headera': Headera, } } </script> <style> #app{ font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } .test{ color:skyblue; } </style>
    //子组件接收
    <template> <div>我是headera <p>{{hea}}</p> <p>{{mas}}</p> <p>{{use}}</p> //正常需要遍历
              <heada v-bind:son="mas"></heada>  //向孙子组将传值
        </div>    
    </template>
    
    <script>
      import Heada from './heada'
    
    export default {
      name: 'Headera',
      props: ['hea','mas','use'],  //用props接收
        components: {
          'heada':Heada
        },

    } </script> <style scoped> div{ background-color:#666; height:400px; } </style>
    //孙子组件
    <template> <div>孙子原来的: <p>接收的{{son}}</p> </div> </template> <script> export default { name: 'heada', props: ['son'] } </script> <style scoped> div{ height: 50px; color: aqua; background: brown; } </style>

     

    3.子向父亲传值

    //儿子组件

    <template> <div @click="denglu">我是heade </div> //触发这个事件
    </template>
    
    <script>
    
    export default {
      name: 'Headera',
      data () {
      },
       methods: {
            denglu () {
                this.$emit('changeMsg',“我是传的值”) 
    }
    }
    }
    </script>
    <style scoped> div{ background-color:#666; height:400px; } </style>
    <template>
      <div id='app'>
         <h1>{{mas}}</h1>
    
         <headera v-on:changeMsg="clickA"></headera>
    
      </div>
    </template>
    
    <script>
    import Headera from './components/Headera'
    
    export default {
      name: 'App',
      data () {
        return {
          mas: '我是父组件zhi',
    
        }
      },
      components: {
        'headera': Headera,
      },
      methods: {
        clickA (x) {
          this.mas = x
        }
      }
    }
    </script>
    
  • 相关阅读:
    压测场景下的 TIME_WAIT 处理
    拥抱云原生,Fluid结合JindoFS :阿里云OSS加速利器
    从DHTML、HTC、XHTML到AJAX
    altas(ajax)控件(一):多功能面板控件Accordion
    fedora7 常用软件安装
    Fedora7安装后的配置
    .net程序员的盲点(六):StringBuilder 和 String 的区别
    .net程序员的盲点(五):告诉你一个不一样的new
    .net程序员的盲点(四):索引器Indexers
    员工究竟渴望学到的是什么?-(杂谈-20070816)
  • 原文地址:https://www.cnblogs.com/taozhibin/p/13089629.html
Copyright © 2011-2022 走看看