zoukankan      html  css  js  c++  java
  • 10.4 Vue 父子传值

    简单示例

    APP.vue

    <template>
      <div>
        <img :src="imgSrc">
        <!-- 父子传值 -->

    <!-- 自定义属性直接 通过属性传值 --> <Vheader :cityArray="citys"></Vheader> <!-- 自定义事件 --> <Vfooter v-on:addZhuangHandler="addHandler"></Vfooter> </div> </template> <script> import imgSrc from './assets/bili.jpg' import Vheader from './components/Vheader' import Vfooter from './components/Vfooter' export default { name: "app", data() { return { imgSrc: imgSrc, citys:["山东","北京","深圳"] } }, methods:{ addHandler (str){ // alert(str) this.citys.push(str); alert(this.citys); } }, components: { Vheader, Vfooter }, } </script> <style scoped> </style>

    Vfooter.vue

    <template>
      <footer class="wrap">
        我是Vfooter,我想测试下给父级组件添加数据: <br>
        <button @click="addCunHandler">给父级组件的数据增加点什么,添加一个村庄</button>
      </footer>
    </template>
    
    <script>
      export default {
        name: "Vfooter",
        data() {
          return {}
        },
        methods:{
          addCunHandler(){
          //  触发自定义事件
            this.$emit('addZhuangHandler','破村庄');
          },
        },
    
      }
    </script>
    
    <style scoped>
    
    </style>

     Vheader.vue

    <template>
      <header class="wrap">
    
        我是header,我从父级组件那里拿到了数据很开心:
        <ul v-for="item in cityArray">
          {{item}}
        </ul>
      </header>
    </template>
    
    <script>
      export default {
        name: "Vheader",
        data() {
          return {}
        },
        methods: {},
        props: {
          cityArray: Array
          // 如果验证不通过会报错
          //  [Vue warn]: Invalid prop: type check failed for prop "cityArray". Expected String with value "山东,北京,深圳", got Array
        },
      }
    </script>
    
    <style scoped>
    
    </style>

    实例详解

    app----->  header

    父组件向子组件传值 

    <!-- 自定义属性直接 通过属性传值 -->
    <Vheader :cityArray="citys"></Vheader>

    子组件从 父组件拿值 

        拿值的时候必须要校验类型,

        拿值的时候的要对应父组件的自定义属性一致才可以拿到

    props: {
          cityArray: Array
         ]

        如果有错误是拿不到的

        如果写错类型也会报错。

    // 如果验证不通过会报错
    //  [Vue warn]: Invalid prop: type check failed for prop "cityArray". Expected String with value "山东,北京,深圳", got Arra

    footer------->app

    子组件向父组件传值

      在methods 中加入事件触发传值操作

      利用 $emit() 方法传值

    $emit("自定义属性的名字","要被传入的数据")
    methods:{
          addCunHandler(){
          //  触发自定义事件
            this.$emit('addZhuangHandler','破村庄');
          },
        },

    父组件得到子组件传递值

      父组件中首先要对子组件中那提供一个自定义的属性

    <!-- 自定义事件 -->
    <Vfooter   v-on:addZhuangHandler="addHandler"></Vfooter>

      对这一属性绑定一个事件,接受的数据将会作为参数被此事件调用

    methods:{
          addHandler (str){
            this.citys.push(str);
            alert(this.citys);
          }
        },

    总结

    • 自定义属性传值
    • 校验后取值
    • $emit("自定义属性的名字","要被传入的数据")
  • 相关阅读:
    Unity3d热更新全书-加载(一)从AssetBundle说起
    Unity3D热更新全书-脚本(三) C#LightEvil语法与调试
    Unity3D热更新全书-脚本(二) 两级分化
    Unity3D热更新全书-脚本(一) 初识脚本
    Unity3D热更新全书-何谓热更新,为何热更新,如何热更新
    C#Light/Evil合体啦
    C#最良心脚本语言C#Light/Evil,XamarinWP8Unity热更新最良心方案,再次进化.
    C#Light 再推荐,顺便介绍WP8 功能展示项目
    任意两张带透明图像的一种形状过渡效果
    FileFilter
  • 原文地址:https://www.cnblogs.com/shijieli/p/10257016.html
Copyright © 2011-2022 走看看