组件
全局组件
方式一（Vue.component() 方法）
组件名字不要乱取
代码展示
# ---------------------------------------------html 代码------------------------------------------
<div id="app01">
<Global></Global>
<Global></Global>
<Global></Global>
<Global></Global>
<Global></Global>
</div>
# ------------------------------------------JavaScript 代码------------------------------------------
Vue.component('Global', {
template: `
<div>
我是全局组件
</div> `,
data() {
return {
}
},
})
浏览器展示
方式二（Vue.extend() 方法）
代码展示
。。。。。。
局部组件
代码展示
# ---------------------------------------------html 代码------------------------------------------
<div id="app">
<my-component></my-component>
</div>
# ------------------------------------------JavaScript 代码------------------------------------------
# 1. 首先定义一个子组件
let conm1 = { # 1. 首先定义一个子组件
template: `
<div>
我是局部组件
</div>`,
}
Vue.component('my-component', {
template: `
<div>
<input type="text" v-model="name">
# 3. 在父组件中使用 # 3. 在父组件中使用
<conm1></conm1>
<conm1></conm1>
<conm1></conm1>
</div>
`,
data() {
return {
name: '',
}
},
# 2. 在父组件中注册
components: { # 2. 在父组件中注册
conm1 # 可以写==》 conm1:conm1,
},
})
let vm = new Vue({
el: '#app',
data: {
name: 'lqz'
},
})
浏览器展示
组件通信
父传子（通过自定义属性）
方式一 通过（props）
props 三种格式
1. 数组：----》 props: ['myname'],
2. 对象：----》 props: {myname : String}, String---> 验证传来的数据类型---> 不匹配则报错
3. 对象套对象
props: {
msg: {
type: String, //类型
required: true, //必要性
default: '老王' //默认值
}
},
代码展示
# -----------------------------------子组件---------------------------------------
<template lang="">
<div>
{{myname}} # 2.使用 myname
</div>
</template>
<script>
export default {
data() {
return {
}
},
props:['myname'], # 1. 使用 props 属性，随意定义一个名字 ===》 myname
}
</script>
<style lang="">
</style>
# -----------------------------------父组件---------------------------------------
<template>
<div>
<login_view :myname="name"></login_view> # 4.使用子组件 ，利用子组件定义的 myname 属性，给它一个值 name
</div>
</template>
<script>
import login_view from './components/Login.vue' # 3.导入子组件
export default {
components: {
login_view
},
data() {
return {
name: '1232132lqz'shiyong # 将父组件的数据通过 myname 属性传递给子组件
}
},
}
</script>
<style lang="">
</style>
子传父（通过自定义事件）
方式一 通过（this.$emit）
代码展示
<body>
<div id="app">
<my-component></my-component>
</div>
</body>
<script>
# ------------------------------------------传递数据的子组件------------------------------------------
let conm1 = {
template: `
<div id="son">
<input type="text" v-model="myText"> # 1.双向绑定数据，将数据给输入框数据给 data 中的 myText。
<button @click="handelClick">点击将数据传递给父组件</button> # 2.给按钮绑定点击事件 handelClick
</div>`,
data() {
return {
myText: ''
}
},
methods: {
handelClick() { # 3. 点击时，触发 handelClick 函数
this.$emit('myevent', this.myText) # 4. 此时通过this.$emit 传递
# 参数一：自定义事件名 参数二：要传递的数据
}
}
}
# ------------------------------------------接收数据的父组件------------------------------------------
Vue.component('my-component', {
template: `
<div>
<conm1 @myevent="handelEvent"></conm1> # 5. 使用自定义的事件 触发函数 handelEvent
<hr>
<h1>儿子传给的数据：-----> {{childData}}</h1>
</div>
`,
data() {
return {
childData: '',
}
},
components: {
conm1
},
methods: {
handelEvent(myText) { # handelEvent 函数被触发 myText：子组件传递的数据
this.childData = myText # 将数据赋值
}
},
})
let vm = new Vue({
el: '#app',
data: {
name: 'lqz'
},
})
</script>
