Detailed explanation of data transfer and data distribution steps of vue.js-JS Tutorial-php.cn

Detailed explanation of data transfer and data distribution steps of vue.js

php中世界最好的语言

Release： 2018-04-13 11:54:23

Original

1624 people have browsed it

This time I will bring you a detailed explanation of the data transfer and data distribution steps of vue.js. What are the precautions for vue.js data transfer and data distribution? The following is a practical case, one Get up and take a look.

1. Data transfer between components

1. The parent component obtains the data of the child component

*The child component sends its own data to the parent

*vm.$emit(Event name, data);

*v-on: @

Example usage: When the send button is clicked, "111" becomes "I am the data of the child component"

nbsp;html>


  <meta>
  <title>父级获取子级的数据</title>
  <script></script>
  <style>
  </style>


<p>
  <aaa>
  </aaa>
</p>
<template>
  <span>我是父级 -> {{msg}}</span>
  //自动调用get方法，@child-msg和下面的this.$emit('child-msg',this.a)相对应
  <bbb></bbb>
</template>
<template>
  <h3>子组件-</h3>
  <input>
</template>
<script>
  var vm=new Vue({
    el:&#39;#box&#39;,
    data:{
      a:&#39;aaa&#39;
    },
    components:{
      &#39;aaa&#39;:{
        data:function(){
          return {
            msg:111,
            msg2:&#39;我是父组件的数据&#39;
          }
        },
        template:&#39;#aaa&#39;,
        methods:{
          //这里的msg实际上就是子组件传递给父组件的数据
          get:function(msg){
            this.msg=msg;
          }
        },
        components:{
          &#39;bbb&#39;:{
            data:function(){
              return {
                a:&#39;我是子组件的数据&#39;
              }
            },
            template:&#39;#bbb&#39;,
            methods:{
              send:function(){
                this.$emit(&#39;child-msg&#39;,this.a);
              }
            }
          }
        }
      }
    }
  });
</script>

Copy after login

2. The child component obtains the data of the parent component

When calling the subcomponent:

Within the subcomponent:

props:['m','myMsg']
props:{
'm':String,
'myMsg':Number
        }

Copy after login

nbsp;html>


  <meta>
  <title>自己获取父级的数据</title>
  <script></script>
  <style>
  </style>


<p>
  </p><p>{{a}}</p>
  <aaa>
    {{msg}}
  </aaa>

<template>
  <h1>11111</h1>
  <bbb></bbb>
</template>
<script>
  var vm=new Vue({
    el:&#39;#box&#39;,
    data:{
      a:&#39;a&#39;
    },
    components:{
      &#39;aaa&#39;:{
        data:function(){
          return {
            msg:111,
            msg2:&#39;我是父组件的数据&#39;
          }
        },
        template:&#39;#aa&#39;,
        components:{
          &#39;bbb&#39;:{
            props:{
              &#39;mmm&#39;:String,
              &#39;myMsg&#39;:Number
            },
            template:&#39;<h3>我是bbb组件->{{mmm}} <br> {{myMsg}}&#39;
          }
        }
      }
    }
  });
</script>

Copy after login

operation result:

Detailed explanation of data transfer and data distribution steps of vue.js

2. Content distribution:

Vue.js provides a way to mix the parent component content and the child component's own template: slot, used to occupy a position

1. Basic usage

nbsp;html>


  <meta>
  <title>slot保留原来的位置</title>
  <script></script>
  <style>
  </style>


<p>
  <aaa>
    <ul>
      <li>1111</li>
      <li>2222</li>
      <li>3333</li>
    </ul>
  </aaa>
  </p><hr>
  <aaa>
  </aaa>

<template>
  <h1>xxxx</h1>
  <slot>这是默认的情况</slot>
  <p>welcome vue</p>
</template>
<script>
  var vm=new Vue({
    el:&#39;#box&#39;,
    data:{
      a:&#39;aaa&#39;
    },
    components:{
      &#39;aaa&#39;:{
        template:&#39;#aaa&#39;
      }
    }
  });
</script>

Copy after login

Operation result: The content in the ul tag has not been overwritten. If slot is not used, the content in the ul tag will be overwritten

Detailed explanation of data transfer and data distribution steps of vue.js

2. The name attribute of the slot

nbsp;html>


  <meta>
  <title>slot中name属性的使用</title>
  <script></script>
  <style>
  </style>


<p>
  <aaa>
    <ul>    //这里slot的名字要与下面slot中name属性相对应
      <li>1111</li>
      <li>2222</li>
      <li>3333</li>
    </ul>
    <ol>    //用法同上
      <li>111</li>
      <li>222</li>
      <li>333</li>
    </ol>
  </aaa>
  </p><hr>
  <aaa>
  </aaa>

<template>  
  <h1>xxxx</h1>
  <slot>这是默认的情况</slot>      //设置name属性，给slot命名
  <p>welcome vue</p>
  <slot>这是默认的情况2</slot>
</template>
<script>
  var vm=new Vue({
    el:&#39;#box&#39;,
    data:{
      a:&#39;aaa&#39;
    },
    components:{
      &#39;aaa&#39;:{
        template:&#39;#aaa&#39;
      }
    }
  });
</script>

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!