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("自定义属性的名字","要被传入的数据")
  • 相关阅读:
    前端请求跨域理解
    可视化交互行为
    文章标题
    在map上标记point
    基于force布局的map
    stack布局
    python一些特有语法
    histogram布局用法
    patition布局
    Shell命令行处理JSON
  • 原文地址:https://www.cnblogs.com/shijieli/p/10257016.html
Copyright © 2011-2022 走看看