1.谈谈你对组件的理解
提高代码的可复用性
2.分别写出如何全局注册和局部注册组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全局注册组件和局部注册组件</title>
<div>我是全局注册的组件</div>
<style>
p{
margin-bottom: 0;
}
#app{
margin-bottom: 20px;
}
#app .jubu{
color: rgb(228, 26, 184);
}
.quanju{
color: rgb(73, 228, 26);
}
</style>
</head>
<body>
<div id="app">
<p>此处为全局注册的组件</p>
<my-component></my-component>
<p>此处为局部注册的组件</p>
<app-component></app-component>
<p>vue的组件模板在某些情况下会受到html标签的限制，比如table标签中，只能有tr,td,这些元素，所以在table中使用组件是无效的，此时可以使用is属性来挂载组件</p>
<table>
这里是最终不是我们想要的dom结构
<app-component></app-component>
</table>
<table>
这里才是我们想要的dom结构
<tbody is="my-component"></tbody>
<tbody is="app-component"></tbody>
</table>
</div>
<div id="bpp">
此处为bpp组件
<p>此处为全局注册的组件</p>
<my-component></my-component>
<p>此处为app局部注册的组件不生效</p>
<app-component></app-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('my-component',{
template:'<div class="quanju">我是全局注册的组件</div>'
})
var app = new Vue({
el:'#app',
data:{
},
components:{
'app-component':{
template:'<div class="jubu">我是局部注册的组件</div>'
}
}
})
var bpp = new Vue({
el:'#bpp',
data:{
},
})
</script>
</body>
</html>
3.写出一个父组件给子组件传递信息的demo
4.写出一个子组件向父组件传递信息的demo
5.写出一个非父子组件之间的通信demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<bcomponent></bcomponent>
<ccomponent></ccomponent>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
//建立一个bus中转站
bus:new Vue()
},
components:{
'bcomponent':{
template:'<div><button @click="handle">点击我向c组件内传递信息</button></div>',
data:function(){
return{
aaa:'我是来自b组件的内容',
}
},
methods:{
handle:function(){
//$root访问根组件的内容
this.$root.bus.$emit('lala',this.aaa);
}
}
},
'ccomponent':{
template:'<div></div>',
created:function(){
//C组件在实例创建的时候就监听事件---lala事件
this.$root.bus.$on('lala',function(value){
alert(value)
})
}
}
}
})
</script>
</body>
</html>
注意事项
- 推荐使用小写字母加-进行命名（必须） child, my-componnet命名组件
- template中的内容必须被一个DOM元素包括 ，也可以嵌套
- 在组件的定义中，除了template之外的其他选项—data,computed,methods
- data必须是一个方法
@ vue组件中camelCased (驼峰式) 命名与 kebab-case（短横
线命名）
@ 在html中, myMessage 和 mymessage 是一致的,,因此在组件中的html
中使用必须使用kebab-case（短横线）命名方式。在html中不允许使用驼
峰！！！！！！
@ 在组件中, 父组件给子组件传递数据必须用短横线。在template中，必
须使用驼峰命名方式，若为短横线的命名方式。则会直接保错。
@ 在组件的data中,用this.XXX引用时,只能是驼峰命名方式。若为短横线
的命名方式，则会报错。
使用props传递数据 父亲向儿子传递数据
- 在组件中使用props来从父亲组件接收参数，注意，在props中定义的属性，都可以在
组件中直接使用 - propps来自父级，而组件中data return的数据就是组件自己的数据，两种情况作用域就是
组件本身，可以在template，computed，methods中直接使用 - props的值有两种，一种是字符串数组，一种是对象，本节先只讲数组
- 可以使用v-bind动态绑定父组件来的内容
网友评论