码迷,mamicode.com
首页 > 其他好文 > 详细

Vue 框架学习(七) 组件化开发

时间:2020-08-16 00:00:53      阅读:83      评论:0      收藏:0      [点我收藏+]

标签:lap   color   ted   const   nbsp   数组   name   style   事件总线   

一、组件通信

(一)传值

  1、父传子:props(注意4个名字两两成对)

父组件:使用绑定把值传给子组件

子组件:通过props获取父组件传入的值(可以进行类型限制或默认值)

技术图片
<body>
  <div id="app">
    <!-- 只能有一个root对象,所以数据的使用必须在一个div里面 -->
    <cpn :cmovies="moviese" :cmessage="message"></cpn>
  </div>

  <template id="cpn">
    <div>
      <ul>
        <li v-for="movie in cmovies">
          {{movie}}
        </li>
      </ul>
      <h2>{{cmessage}}</h2>
    </div>
  </template>

  <script>
    // 父传子: props
    const cpn = {
      template: #cpn,
      // props: [‘cmovies‘, ‘cmessage‘],
      props: {
        // 类型限制
        // cmovies: Array,
        // cmessage: String

        // 提供默认值,以及毕传值,数组不能传空数组
        cmovies: {
          type: Array,
          default: [Default, Default],
        },
        cmessage: {
          type: String,
          default: Default,
          request: true,
        }
      },
      data() {
        return {}
      },
    }

    //创建Vue实例,得到 ViewModel
    const app = new Vue({
      el: #app,
      data: {
        message: Smallstars,
        moviese: [海王, 火影]
      },
      methods: {},
      computed: {},
      components: {
        cpn
      },
    });
  </script>
</body>
View Code

 

  2、子传父

子组件:通过监听点击事件,然后使用$emit发射事件

父组件:监听子组件的发射事件

技术图片
<body>
  <!-- 父组件模板 -->
  <div id="app">
    <!-- 监听子组件发射的事件,传给父组件操作 -->
    <cpn @itemclick="cpnclick"></cpn>
  </div>

  <!-- 子组件模板 -->
  <template id="cpn">
    <div>
      <button v-for="item in categories" @click="btnClick(item)">{{item.name}}</button>
    </div>
  </template>

  <script>
    // 子组件
    const cpn = {
      template: #cpn,
      data() {
        return {
          categories: [{
              id: 1,
              name: 热门推荐
            },
            {
              id: 2,
              name: 手机数码
            },
            {
              id: 3,
              name: 家用家电
            },
            {
              id: 4,
              name: 电脑办公
            },
          ]
        }
      },

      methods: {
        btnClick(item) {
          // 发射事件
          this.$emit(itemclick, item)
        }
      },
    }

    //创建Vue实例,得到 ViewModel
    const vm = new Vue({
      el: #app,
      data: {},
      methods: {
        // 父组件对子组件传来的事件进行操作
        cpnclick(item) {
          console.log(cpnclick, item);
        }
      },
      computed: {},
      components: {
        cpn
      },
    });
  </script>

</body>
View Code

 

(二)访问

  1、父访子

 

  2、子访父

(三)事件总线

(四)Vuex

  详见Vuex专题

二、插槽

Vue 框架学习(七) 组件化开发

标签:lap   color   ted   const   nbsp   数组   name   style   事件总线   

原文地址:https://www.cnblogs.com/smallstars/p/13509174.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!