Vue2.0学习之详解Vue 组件及父子组件通信(2)

日期：2020-05-18 栏目：程序人生浏览：次

局部注册的组件，只有在当前实例的作用域中才可以使用，在作用域中也可以复用，效果如下。

组件.png

父子组件间通信

父组件给子组件通信

父组件===》子组件（用props）

组件实例的作用域是孤立的，不能再子组件直接用父组件的数据。

可以在组件上使用自定义属性绑定数据，在组件中组要显示的用props生命自定义属性名。

也就是记住一句话，父组件给子组件传值得时候，就是调用组件时给组件添加一个属性，然后在组件内用props接收即可，组件内根据属性名即可使用。

<div id="app">
  <h2>自定义下拉框</h2>
  <cus-list btn-value="查询"></cus-list>
  <cus-list btn-value="搜索"></cus-list>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
  Vue.component('cus-list',{
    data(){

    },
    props:['btnValue'],
    template:`
      <section>
        <div>
          <div>
            <input type="text">
            <input type="button" name="" :value="btnValue">
            <span></span>
          </div>
        </div>
      </section>
    `
  })
  new Vue({
    el:"#app",
    data:{
      
    }
  })
</script>

页面效果

props传值.png

子组件给父组件通信

子组件===》父组件

需要用到自定义时间，父组件用$on监听自定义事件，$emit触发父组件所关心的自定义事件。

1、在子组件中定义事件内容<li v-for="item of list" @click="clickLi(item)">{{item}}</li>

2、父组件中v-on自定义事件进行接收v-on:receive="changeValue"

3、在触发子组件事件的时候，$emit 通知父组件 this.$emit("receive",item);

4、父组件根据自定义事件进行相应反馈changeValue:function(value){this.val = value;}

看如下案例，点击input的时候，出现下拉列表框，选中相应的列表，列表内容出现在input框中。

  <div id="app">
    <h2>自定义下拉框</h2>
    <cus-list select-Value="搜索" v-bind:list="list1" >
    </cus-list>
  </div>
  <script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
  <script type="text/javascript">
  // 全局注册组件
  Vue.component('cus-list',{
    data(){
      return {
        selectShow:false,
        val:''
      }
    },
    props:['selectValue','list'],
    template:`
      <section>
        <div>
          <div>
            <input type="text" @click="selectShow = !selectShow" :value="val">
            <input type="button" name="" :value="selectValue">
          </div>
          <list-li :list="list" v-show="selectShow" v-on:receive="changeValue"></list-li>
        </div>
      </section>
    `,
    methods:{
      changeValue:function(value){
        this.val = value;
      }
    }
  })
  Vue.component('list-li',{
    props:['list'],
    template:`
        <ul>
          <li v-for="item of list" @click="clickLi(item)">{{item}}</li>
        </ul>
    `,
    methods:{
      clickLi:function(item){
        this.$emit("receive",item);
      }
    }
  })
  new Vue({
    el:"#app",
    data:{
      list1:['宋仲基','余文乐','鹿晗','陈小春','黄晓明','易烊千玺']
    }
  })
  </script>

转载注明出处：http://www.heiqu.com/5194.html

Vue2.0学习之详解Vue 组件及父子组件通信(2)

相关推荐