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;
}
}
借助事件中心 来实现
-
创建事件中心对象
var hub = new Vue(); -
在组件中定义监听函数
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>
`
});
