您的位置:68399皇家赌场 > 服务器租用 > 详解Vue组件之间的多少通讯实例

详解Vue组件之间的多少通讯实例

发布时间:2019-06-07 19:55编辑:服务器租用浏览(134)

    www.68399.com,在学习vue时,组件学习相比较棘手,尤其是组件间的通信,所以总括一下,官方文书档案的零件部分。

     父组件能够在使用子组件的地方间接用 v-on 来监听子组件触发的事件

    由此确立中间的事件bus总线。完毕非父亲和儿子组件之间的多少通讯。

    JS

    一对组件

    <div id="parent">
    <!-- vm.$refs.p will be the DOM node -->
    <b ref="p">hello</b>
    <!-- vm.$refs.child will be the child comp instance -->
    <user-profile v-for='i in 3' ref="profile"></user-profile>
    </div>
    <script>
    var userPf=Vue.component('user-profile',{
      template:'<div>hello $refs</div>'
    });
    var parent = new Vue({ el: '#parent' });
    // 访问子组件
    var child = parent.$refs.profile;
    console.log(child[0]);
    console.log(parent.$refs.p);
    </script>
    

    www.68399.com 1

    JS

    var com = {
      template:'<div><h1>标题</h1>作者信息</div>',
      data(){
        return{
          message:'组件的属性'
        }
      },
      methods:{
    
      }
    }
    
    new Vue({
      components:{
        'compontent-name':com
      }
    })
    

    相对来讲分析:

    //这是父组件中的部分代码,父组件向子组件<handle-Employee><handle-Employee>传递数据(method,dialogFormvisible)
     // 父组件的部分代码
    <!--添加员工模块-->
       <div class="add">
        <el-button type="primary" icon="edit" @click="handleAdd">新增员工</el-button>
        <handle-Employee :method="method"
         :dialogFormVisible="dialogFormVisible" @close="closeDialog" @getEmployee="getEmployee"></handle-Employee>
       </div>
      </div>
    // 父组件的script代码
     export default {
      data () {
       return {
        method:{handle: 'add‘, title: '增加员工'}
        dialogFormvisible: false
     }
     } 
    }
    
    // 子组件中则需要加prop属性数据 ,如下所示:
     export default {
       props: [ 'method', 'dialogFormVisible']
     }
    
    //所以只要父组件中的数据变化修改,子组件中的数据也会跟这修改;
    

    下一场向它传播1个不以为奇字符串:

    非老爹和儿子组件通讯

    动态props通讯---组件与根节点(父亲和儿子之间)

    前天先到此地,困了。还或者有更头晕目眩的多少通讯是用vuex,可是自个儿现在的门类应当是一时还不会用到,所以事后用到再去深远摸底。

    举例

    亟待接纳三个空的Vue实例来保管

    <div id="app2">
      <input v-model="parentMsg">
      <br>
      <child :parent-msg="parentMsg"></child>
    </div>
    <script>
      Vue.component('child', {
        props: ['parentMsg'],
        template: '<mark>{{ parentMsg }}<mark/>'
      });
      new Vue({
        el: '#app2',
        data: {
          parentMsg: 'msg from parent!'
        }
      })
    </script>
    

    www.68399.com 2

     Vue.config.debug = true;
     Vue.component('child', {
     // declare the props
     props: ['msg','nihao','nisha'],
     // the prop can be used inside templates, and will also
     // be set as `this.msg`
     template: '{{ msg }}{{nihao}}{{nisha}}',
     /*data: function() {
     return {
     msg: 'boy'
     }
     }*/
     });
     var vm = new Vue({
     el: '#app1'
     })
    

    全局组件

    //定义一个局部data属性,并将 prop 的初始值作为局部数据的初始值
    props: ['initialCounter'],
        data: function () {
        return { counter: this.initialCounter }
        }
    //定义一个局部computed属性,此属性从 prop 的值计算得出
     props: ['size'],
        computed: {
        normalizedSize: function () {
        return this.size.trim().toLowerCase()
        }
        }
    

    使用prop举行数量传递:

    在props 中传唱三个数据是,若是在父组件的沙盘类增多别的因素大概字符会有:
    1-在最前方到场—各样子组件渲染出来都会在其后边加上

    注册组件

    例子1:

    1 bus.js文件

    HTML

    零件通讯

    <div id="app4">
      <display></display>
      <increment></increment>
    </div>
    <script>
      var bus = new Vue();
      Vue.component('increment', {
        template: `<button @click="add"> </button>`,
        data: function () {
          return {count: 0}
        },
        methods: {
          add: function () {
            bus.$emit('inc', this.count =1)
          }
        }
      });
      Vue.component('display', {
        template: `Clicked: <mark>{{c}}</mark> times`,
        data: function () {
          return {c: 0}
        },
        created: function () {
          var self=this;
    //      bus.$on('inc', function (num) {
    //        self.c = num
    //      });
          bus.$on('inc', (num) =>
            this.c = num
          );
        }
      });
      vm = new Vue({
        el: "#app4",
      })
    </script>
    

    www.68399.com 3

    三-在中间投入—他前边子组件前面加上,前面包车型客车子组件前边加上

    Vue.component('component-name',{
      template:'<div><h1>标题</h1>作者信息</div>',
      data(){
        return{
          message:'组件的属性'
        }
      },
      methods:{
    
      }
    })
    

    小心在 JavaScript 中指标和数组是援引类型,指向同三个内部存款和储蓄器空间,假使 prop 是一个对象或数组,在子组件内部退换它会潜移默化父组件的情形。

    你或然感兴趣的篇章:

    • Vue.js每日必学之组件与组件间的通讯
    • Vuejs第八篇之vuejs老爹和儿子组件通讯
    • Vuejs 用$emit与$on来张开兄弟组件之间的数额传输通讯
    • vue贰.0老爹和儿子组件及非父亲和儿子组件之间的通讯格局
    • 详解Vue 非老爹和儿子组件通讯格局(非Vuex)
    • 深入商讨Vue.js组件和零部件通讯
    • vue.js入门(三)——详解组件通讯
    • 详解vue组件通信的三种格局
    • 详解vue跨组件通讯的两种艺术
    • Vue组件通讯的三种方法聚集

    HTML

    利用子组件的props选项,父组件能够向子组件传递数据,不过子组件不可能求改父组件的数码。

    1. 监听:$on(eventName)
    2. 触发:$emit(eventName)

    相似父组件向子组件传递数据用prop实行传递,注意,子组件不能够对prop中的数据举行转移,vue中鲜明是幸免子组件对父组件中的数据开始展览改换。而子组件向父组件举办数量传递则能够经过事件触发父组件的风云来落到实处多少的传递。(是还是不是有一些懵逼了,看个例证吧 )

    结论:

    语法如下,组件模板需求使用四个根标签包裹起来。data必须是一个办法

    <comp some-prop="1"></comp>
    //组件内部数据传递,对应字面量语法:传递了一个字符串"1" 
    
    1. 第一创建事件bus,我会新建一个bus.js文件;注册bus。
    2. 分别在组件中应用emit和on完毕数据里面的通讯;
     Vue.config.debug = true;
     Vue.component('child', {
     // declare the props
     props: ['msg','nihao','nisha'],
     // the prop can be used inside templates, and will also
     // be set as `this.msg`
     template: '{{ msg }}{{nihao}}{{nisha}}123',
     /*data: function() {
     return {
     msg: 'boy'
     }
     }*/
     });
     var vm = new Vue({
     el: '#app1'
     })
    
    <div id='app'>
      <com-a></com-a>
      <com-b></com-b>
    </div>
    
    
    var bus = new Vue();
    
    var coma = {
      template: '<p @click="send">{{adata}}</p>',
      data(){
        return {
          adata: 'a的数据'
        }
      },
      methods:{
        send(){
          // 触发这一事件
          bus.$emit('data-to-b', this.adata);
        }
      }
    
    };
    
    var comb= {
      template: '<p>{{bdata}}</p>',
      data(){
        return {
          bdata: 'b的数据'
        }
      },
      mounted(){
        // 监听事件,获取a组件的数据,进行相关操作
        bus.$on('data-to-b', function (msg) {
          this.bdata = msg;
        }.bind(this));
      }
    };
    
    new Vue({
      el:'#app',
      components: {
        'com-a': coma,
        'com-b': comb
      }
    })
    

    如上便是本文的全部内容,希望对大家的学习抱有扶助,也希望大家多多辅助脚本之家。

    关于父子组件以及非父亲和儿子组件之间的多少通讯

    结果:hello! 123 hello1! 123 hello2!123

    本文由68399皇家赌场发布于服务器租用,转载请注明出处:详解Vue组件之间的多少通讯实例

    关键词: 68399皇家赌场