vue之组件化开发
局部组件的创建和使用
使用局部组件的打油诗： 建子 挂子 用子
- 首先我们得创建我们的局部组件
- 然后我们创建了之后我们得给他挂在
- 最后再使用我们创建的子组件
<!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">
<!-- 3.使用子组件 -->
<App></App>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
//App组件 html+css+js
//1.创建组件
//在组件中 data 必须是一个函数
const App = {
data(){
return {
msg:'我是APP组件'
}
},
template: `
<div>
<h3>{{msg}}</h3>
<button @click= 'handleClick' >按钮</button>
</div>
`,
methods: {
handleClick(){
this.msg = '我被更改了！'
}
},
computed:{
}
}
new Vue({
el: '#app',
data: {
},
components: {
//2.挂载子组件
App//App:App
}
})
</script>
</body>
</html>
全局组件的创建和使用
我们创建的全局组件使用Vue.component('组件名', {})
之后我们就可以在我们的其他组件里调用这个组件名来使用这个全局组件
<!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">
<!-- 3.使用子组件 -->
<App></App>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
//App组件 html+css+js
// 创建全局组件 第一个是组件名 第二个是配置
// 只要创建全局组件 可以在任意地方使用 （template）
Vue.component('Vheader', {
template: `
<div>
我是导航组件
</div>
`
})
Vue.component('Vaside', {
template: `
<div>
我是侧边栏组件
</div>
`
})
//1.创建组件
//在组件中 data 必须是一个函数
const Vcontent = {
data(){
return{
}
},
template:`
<div>
我是内容组件
</div>
`
}
const App = {
data() {
return {
msg: '我是APP组件'
}
},
components:{
//在这里挂载局部组件 Vcontent
Vcontent
},
template: `
<div>
<Vheader>
</Vheader>
<div>
<Vaside />
<Vcontent />
</div>
</div>
`,
methods: {
handleClick() {
this.msg = '我被更改了！'
}
},
computed: {
}
}
new Vue({
el: '#app',
data: {
},
components: {
//2.挂载子组件
App//App:App
}
})
</script>
</body>
</html>
组件通信！！
父传子
- 在父组件使用子组件的地方通过
:传递名='传递信息' - 在子组件声明
props用来接受在父组件传递的传递名 - 我们就可以在子组件中使用传递名来使用传递来的信息
<!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">
<App></App>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
//父传子
//1.在子组件中声明props接受在父组件挂载的属性
//2.可以在子组件的template中任意使用
//3.在父组件绑定自定义的属性
Vue.component('Child',{
template:`
<div>
<h3>我是一个子组件</h3>
<h4>{{childData}}</h4>
</div>
`,
props:['childData'],
})
const App = {
data() {
return {
msg: '我是父组件传进来的值'
}
},
template: `
<div>
<Child :childData = 'msg' ></Child>
</div>
`,
computed: {
}
}
new Vue({
el: '#app',
data: {
},
components: {
App
}
})
</script>
</body>
</html>
子传父
- 子组件中 使用原生的事件来向父组件抛出一个值，例如我们所用的
@input事件来调用我们的函数handleInput - 而在函数中 我们对数据进行处理后 使用
this.$emit('父组件中自定义的事件',传递的值)来向父组件抛出一个值 - 父组件中 绑定我们自定义的事件,
@inputHandler='input'并传递给函数,而在函数中我们就可以input(i)用一个形参来接受数据 - 最后在我们的函数中对接受的数据进行处理，然后在页面中进行渲染
<!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">
<App></App>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
template:`
<div>
<h3>我是一个子组件</h3>
<input type="text" @input='handleInput' />
</div>
`,
methods:{
handleInput(i){
// console.log(i.target.value)
const val = i.target.value
this.$emit('inputHandler',val)
}
}
})
const App = {
data() {
return {
newVal:''
}
},
methods:{
input(newVal){
this.newVal = newVal
}
},
template: `
<div>
<div class='father' >
数据:{{newVal}}
</div>
<Child @inputHandler='input' ></Child>
</div>
`,
computed: {
}
}
new Vue({
el: '#app',
data: {
},
components: {
App
}
})
</script>
</body>
</html>
平行组件
- 在平行组件中 我们需要一个中央事件总线来运输平行组件中的数据
const bus = new Vue() - 在我们的两个组件中 发送数据的一方需要在
created(){}里用$on来绑定事件 进行一些对数据的操作 - 接受数据的一方需要使用
$emit来触发那个事件 - 而进行两个平行组件间数据的通信就需要我们的中央事件总线
bus.$onbus.$emit
<!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">
<App></App>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
const bus = new Vue()
//中央事件总线
Vue.component('A',{
data(){
return{
count:0
}
},
template:`
<div>{{count}}</div>
`,
created(){
// $om 绑定事件
bus.$on('add',(n)=>{
this.count += n
})
}
})
Vue.component('B',{
methods:{
handleClick(){
//$emit 触发事件
bus.$emit('add',1);
}
},
data(){
return{
}
},
template:`
<div>
<button @click='handleClick' >加入购物车</button>
</div>
`
})
const App = {
data() {
return {
}
},
template: `
<div>
<A></A>
<B></B>
</div>
`,
computed: {
}
}
new Vue({
el: '#app',
data: {
},
components: {
App
}
})
</script>
</body>
</html>
嵌套组件
- 在开发时我们有可能有多层嵌套，那么这种情况我们就可以使用,父级
provide子级inject的方法来进行组件通信 - 在我们的父级当中,
provide(){ return{ msg:"父级的数据" } }就可以在子级中通过inject - 在子级中
inject:['msg']获取的名字必须与父级传递的元素同名 - 这样我们就可以对获取的数据进行操作了
在嵌套中我们还可以使用$parent $chlidren来进行父级和子级的操作
<!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">
<App></App>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
//provide
//inject
//父组件 provide来提供变量在子组件中通过inject来注入变量
//无论组件嵌套多深
const bus = new Vue()
//中央事件总线
Vue.component('B',{
data(){
return{
count:0
}
},
inject:['msg'],
created(){
console.log(this.msg)
},
template:`
<div>{{msg}}</div>
`,
})
Vue.component('A',{
data(){
return{
}
},
created(){
console.log(this.$parent)
console.log(this.$children)
},
template:`
<div>
<B>
</B>
</div>
`
})
const App = {
data() {
return {
}
},
provide(){
return{
msg:"父级的数据"
}
},
template: `
<div>
<A></A>
</div>
`,
}
new Vue({
el: '#app',
data: {
},
components: {
App
}
})
</script>
</body>
</html>
