Vue提问二:(组件)

1.全局组件组件怎么注册?data返回的是什么?组件怎么使用?组件的数据是否独立?

2.组件必须要有根元素?组件的命名方式有哪两种?推荐用哪种?

3.局部组件怎么定义?使用范围?

4.vue的调试工具怎么用?

5.props数组的数据是干嘛的?

6.父组件怎么传值到子组件?

7.当子组件标签中number或者布尔 绑定和不绑定的区别?

<menu-item :pnum='12' pnum1 = "12"></menu-item>

8.子组件可以通过props直接操作父组件中的数据(数组/对象等)吗?

9.子组件通过自定义事件向父组件传递信息的方式?

10.非父子组件间的传值

11.插槽怎么使用?多个插槽呢?

12.具名插槽怎么定义以及使用?

13.作用域插槽怎么定义和使用?

答案

Vue.component('button-counter', {
    data: function () { 
      return {
        count: 0
      }
    },
    template: '<button @click="handle">点击了{{count}}次</button>',
    methods: {
      handle: function () {
        this.count += 1;
      }
    }
  })

data 返回的是一个函数,每个组件的数据都是独立的

 <div id="app">
    <button-counter></button-counter>
  </div>

组件摸板不能是两个同级的元素。必须要有两个模板。

props命名规则:分为驼峰式(使用组件的适合,智能在字符串摸板字使用,在普通的标签摸板中使用,必须是短横线的方式)和横线式,推荐短横线的方法

var HelloWorld = {
      data: function () {
        return {
          msg: 'HelloWorld'
        }
      },
      template: '<div>{{msg}}</div>'
    };
 var vm = new Vue({
      el: '#app',
      data: {},
      components: {
        'hello-world': HelloWorld,
      }});

局部组件只能在注册他的父组件中使用,别的地方不可以使用

用于接受父组件传值,在组件标签中绑定对应的值。

<menu-item :menu-title='ptitle'></menu-item>
Vue.component('menu-item', {
      props: ['menuTitle'],
      template: '<div>{{menuTitle}}</div>'
    });

var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '父组件中内容',
        ptitle: '动态绑定属性'
      }
    });

加上绑定的pnum是一个数字类型/布尔类型,不加的是字符串类型

可以,但是不推荐,props传递数据原则:单向数据流

<menu-item  @enlarge-text='handle'></menu-item>
自定义事件$emit("事件名",$event),$event代表传递的值 
template: `
        <div>
          <button @click='$emit("enlarge-text")'>扩大父组件中字体大小</button>
        </div> `
父组件定义方法
methods: {
        handle: function(val){
          // 扩大字体大小
          this.fontSize += val;
        }
      }

借助事件中心 来实现

  1. 创建事件中心对象

    var hub = new Vue();
    
  2. 在组件中定义监听函数

    Vue.component('test-tom', {
          template: `
            <div>
                <button @click='handle'>点击</button>
            </div>`,
          methods: {
            handle: function(){//触发jerry-event事件
              hub.$emit('jerry-event', 2);
            }
          },
          mounted: function() {
            // 监听兄弟节点的tom-event事件
            hub.$on('tom-event', (val) => {
              this.num += val;
            });
          }
        });
    
Vue.component('alert-box', {
      template: `
        <div>
          <strong>ERROR:</strong>
          <slot>默认内容</slot>  
        </div>
      `
    });

<alert-box>这里面写的东西都会填充到插槽里面,如果不写则用默认的插槽内容</alert-box>

12

方法一:在模板中给slot添加一个name属性,在使用slot方法的时候加上slot="name名"

<base-layout>
      <p slot='header'>标题信息</p>
      <p>主要内容1</p>
      <p>主要内容2</p>
      <p slot='footer'>底部信息信息</p>
</base-layout>
Vue.component('base-layout', {
      template: `
        <div>
          <header>
            <slot name='header'></slot>
          </header>
          <main>
            <slot></slot>
          </main>
          <footer>
            <slot name='footer'></slot>
          </footer>
        </div>
      `
    });

方法二:或者使用template标签,使用该标签,template并不会被渲染到页面

<base-layout>
      <template slot='header'>
        <p>标题信息1</p>
        <p>标题信息2</p>
      </template>
      <p>主要内容1</p>
      <p>主要内容2</p>
      <template slot='footer'>
        <p>底部信息信息1</p>
        <p>底部信息信息2</p>
      </template>
</base-layout>

13.详细的解释卡这个博客吧https://www.jianshu.com/p/e10baeff888d

<fruit-list :list='list'>
      <template slot-scope='slotProps'>
        <strong v-if='slotProps.info.id==3' class="current">{{slotProps.info.name}}		         </strong>
        <span v-else>{{slotProps.info.name}}</span>
      </template>
</fruit-list>
Vue.component('fruit-list', {
      props: ['list'],
      template: `
        <div>
          <li :key='item.id' v-for='item in list'>
            <slot :info='item'>{{item.name}}</slot>
          </li>
        </div>
      `
    });
原文地址:https://www.cnblogs.com/li33/p/13536663.html