1、全局组件
全局组件
注册全局组件: Vue.component('组件名',{template:"标签模板"})
全局组件可以在不同的实例中使用
注意:组件名如果是驼峰写法 使用时必须 global-child 格式
注意:模板标签必须有一个根标签
组件中的数据必须是函数返回形式
组件中也可以添加事件 @click='handleClick'
局部组件
注意:只能在当前的组件实例对象中使用
注意:组件名如果是驼峰写法 使用时必须 global - child 格式
注意:模板标签必须有一个跟标签
组件中的数据必须是函数返回形式
组件中也可以添加事件 @click='handleClick'
<body>
<div id="app">
<p>{{msg}}</p>
<!-- 使用全局组件 -->
<global-child></global-child>
<!-- 使用局部组件 -->
<part-child></part-child>
</div>
<div id="app1">
<!-- 使用全局组件 -->
<global-child></global-child>
<!-- 不能使用局部组件,没有注册 -->
<!-- <part-child></part-child> -->
</div>
</body>
<script>
Vue.component('globalChild',{
template:`<div @click='handleClick' style='display:flex' ><p>我是全局组件</p><p>奋斗的青春{{name}}</p></div>`,
data:function(){
return{
name:'如今我是造梦的人啊'
}
},
methods: {
handleClick(){
console.log('怅然若失流连忘返啊');
}
},
})
const vm = new Vue({
el:'#app',
data:{
msg:'在这之前 别说再见',
},
components:{
partChild:{
template:`<p>我是局部组件---{{partname}}</p>`,
data(){
return {
partname:'林晓峰'
}
}
}
}
})
const vm1 = new Vue({
el:'#app1',
data:{
msg:'轻松一下'
}
})
</script>
运行结果:
组件嵌套:
<body>
<div id="app">
<p>{{msg}}</p>
<!-- 使用全局组件 -->
<global-child></global-child>
<!-- 使用局部组件 -->
<part-child></part-child>
</div>
</body>
<script>
Vue.component('globalChild',{
template: `<div @click='handleClick' style='display:flex' ><p>我是全局组件</p><p>奋斗的青春{{name}}</p></div>`,
data:function(){
return {
name:'cancel false cancel right'
}
},
methods: {
handleClick(){
console.log('fill in be careful')
}
},
})
const vm = new Vue({
el:'#app',
data:{
msg:'Lynchpin what is lynchpin'
},
components:{
partChild: {
// 局部组件里面嵌套了全局组件
template: `<p>我是局部组件---{{partname}}-- <global-child></global-child></p>`,
data() {// 组件数据写法
return {
partname: "jerry"
}
}
}
}
})
</script>
运行结果:
父传子
组件使用的时候,单双标签都可以
父传子 方法1
1.先给子组件设置一个属性 :tit='msg'
2.在子组件中使用props:["tit"] 接受传过来的属性
3.该属性就是传过来的数据
4.在子组件中传过来的属性和data中的数据使用方法一样
父传子 方法2
1.先给子组件设置一个属性 :tit='msg'
2.子组件使用props:{tit:{default:456,type:Number}} 对象形式
3.default 表示默认值,及如果没有传过来属性,我就使用默认值
4.type 表示数据类型。对父组件传过来的数据类型做校验
5.type 和default 可以省略
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<!-- 给子组件设置一个自定义属性 -->
<globalchild :tit = 'msg' aa='100'/>
</div>
</body>
<script>
Vue.component('globalchild',{
template:`<p>我是全局组件--{{name}}---{{tit}}----{{aa}}</p>`,
data(){
return {
name:'全局组件'
}
},
props:{
tit:{
default:'456',//默认值
type:String
},
aa:{}
},
created() {
console.log('tit',this)//this 为子组件的实例对象
console.log(this.tit);//123
console.log(this.name);//全局组件
},
})
const vm = new Vue({
el:'#app',
data:{
msg:'123'
},
created(){
console.log(1,this);//this为vm实例
}
})
</script>
</html>
运行结果:
子传父
子传父步骤:通过事件进行传参
第一步:给子组件绑定事件 @click='emitFn'
第二步:在子组件事件函数中执行 this.$emit('自定义事件',数据)
第三步:在父组件上接受传过来的事件
第四步:在父组件的methods 中定义该事件对应的执行函数getData
第五步:getData(m)中的形参就是传过来的数据
<body>
<div id="app">
<ul>
<li v-for='item in boys' :key='item.id'>{{item.name}}</li>
</ul>
<partchild @transfer='getData' />
</div>
</body>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: '赵文卓',
boys: [
{
id: 0,
name: '热狗'
},
{
id: 1,
name: '尹正'
}
]
},
methods: {
getData(m) {
console.log(m)
this.boys = m
}
},
components: {
partchild: {
template: `<p @click='emitFn'>我是局部组件---{{name}}</p>`,
data: function () {
return {
name: '张晋',
members: [
{
id: 0,
name: '高瀚宇'
},
{
id: 1,
name: '白举纲'
}
]
}
},
methods: {
emitFn() {
console.log('你点的是子组件');
console.log(this);//this是子组件的vue实例
this.$emit('transfer', this.members)
}
}
}
}
})
</script>
子传父方法----ref
ref 如果给普通标签添加 获取后是标签dom 节点
ref 放在子组件上,获取的是当前子组件实例对象
总结: ref 方式 简单粗暴
给子组件设置ref 获取了该子组件的实例对象
<body>
<div id="app">
<p ref="p1">{{msg}}</p>
<partchild ref="c"></partchild>
<ul>
<li v-for='(item,index) in fatherArr' :key='index'>
{{item.name}}</li>
</ul>
</div>
</body>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: '李承铉',
fatherArr: []
},
mounted() {
console.log(this.$refs.p1)//<p>XXX</p>
console.log(this.$refs.c.childarr);//childarr数组内容
this.fatherArr = this.$refs.c.childarr
},
components: {
partchild: {
template: `<p>我是局部子组件</p>`,
data: function () {
return {
childarr: [
{
id: 0,
name: '李珠衔'
},
{
id: 1,
name: '张淇'
}
]
}
}
}
}
})
</script>
运行结果: