zoukankan      html  css  js  c++  java
  • Vue组价通信

    1.什么是路由?

      单页面应用程序开发

      无跳转,所有的交互都需要在一个页面完成

    2.组件通信

     一,父传子组件通信 (pass  props  / props down)

        调用组件的方式就是写组件名称标签

       传递数据:

        将渲染的列表数据放到根组件App.js中,然后通过通信让子组件获取数据

        我们可以在父组件中通过组件标签属性来传递数据

        a.在使用组件标签上添加自定义属性

          <todo-main foo = 'bar'></todo-main>

        b.在子组件中通过props选项声明接收该数据  ,相当于声明函数形参

          props: [ ' foo ' ]

         c.然后我们就可以在子组件中像使用data属性成员一样来使用props中的数据  <label>{{ foo }}</label>

          d.使用v-bind来传递动态数据

      二,子传父组件通信 (Emit event / events  up )

        在子组件中绑定函数,获取数据,传递给父组件,再由父亲自己去决定如何使用这个数据

        a.发布一个自定义事件  $.emit('tianjia',value)     //事件无论如何这里都发布出去了,处理不处理数据看你自己的需求

        b.在使用组件标签上通过v-on的方式来监听组件内部发布的自定义事件

        c.在父组件调用子组件标签上绑定事件处理函数

        d.在父组件中添加一个方法,形参就是接收的事件处理函数的value,用子组件的处理函数绑定父组件的方法,就可以将父子组件联系在一起

          清空文本框,子组件自己处理,直接将value=‘’ ‘’

        注意:事件不需要强制监听,事件本身带有解耦的性质

    3.props

      prop是单向绑定的,当父组件的属性数据变化时,将传递给子组件,但是反之不会,即子组件不能去修改prop数据,引用类型除外

      无论是普通数据还是引用数据都不能重新赋值,都只是修改

        修改:this.user.name = 'hahha';

        重新赋值:this.user = {  };

      因为JavaScript中对象和数组是引用数据类型,指向同一个内存空间,如果prop是一个对象或者数组,在子组件内部改变会影响父组件的状态

     props验证:

      props: {     //推荐这样来定义props,更严谨

        todos: {

          type:Array,

          //require:true  //必须给,此时require和default互斥,只选一个就可以

          default: function(){

            return  [ ];   //props默认值,如果没有传值,就是空数组

          }

        }

      }

      三,兄弟组件通信

        a.创建一个空的Vue实例

          const bus = new Vue();     //bus相当于中央公共事件

          bus.$emit(' count ' , this.count)   //用于发布一个自定义事件,可以先发布,就算没有调用的也没有关系,以后谁需要谁调用

        b.在组件外部调用

          bus.$on()    //用于监听一个自定义事件,执行事件回调函数

        c.在兄弟组件中添加create()方法

          //当组件被创建的时候,就会自动调用这个函数

          //而且只调用一次,

          //我们可以在这里通过this来访问数据成员

          created() {      //生命周期函数

              //此时val就是接受的bus.$emit(' count ' , this.count)中的this.count

            bus.$on('count' , (val)=> {

                console.log('事件被定义了')      

          })

        }

        <button id='btn'>你好</button>

         $('#btn').onclick(function(){

           $(this).html();

        })

    4.使用第三方库axios

      axios({

       method : 'get',

        url:'./data.json', 

        }).then(function(res){

        console.log(res,data);

      }

    )

    5.

  • 相关阅读:
    将一张图片的人物融入另一张图片中
    填充---内容识别图片
    使用蒙版--渐变--制作瓶子倒影
    form表单基础知识
    表格排版及其表格嵌套
    HTML表格,table,thead,tbody,tfoot,th,tr,td,的属性以及跨行,跨列
    垃圾收集,内存问题
    JS预解析机制
    python ==》 内置函数
    python ==》 递归
  • 原文地址:https://www.cnblogs.com/md-lw/p/8715280.html
Copyright © 2011-2022 走看看