Vue学习笔记(5)--组件化的基本使用、父子组件间的访问和传递数据

Ming-hl

于 2020-04-01 21:17:55 发布

阅读量151

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_43294163/article/details/105254210

版权

一、组件化的基本使用

创建组件构造器对象

const cpnC = Vue.extend({
					template: `
					<div>
						<h2>
							标题
						</h2>
					</div>`
				})

``(模版字符串)是ES6中的新的定义字符串的语法，最大的特点就是可以换行
//使用''的话，换行要用+
				const str =	'abc' +
				'bcd'
//使用``的话
				const str =	`abc
				bcd`		

注册组件
```
Vue.component('my-cpn', cpnC)
```

使用组件

<div id='app'>
	<my-cpn></my-cpn>
</div>

整体代码

    <div id='app'>
      //3、使用组件
      <my-cpn></my-cpn>
    </div>

		<script src="vue.js"></script>
			<script>
				//1、创建组件构造器对象
				const cpnC = Vue.extend({
					template: `
					<div>
						<h2>
							标题
						</h2>
					</div>`
				})
				
				//2、注册组件
				Vue.component('my-cpn', cpnC)
				
		    const app = new Vue({
		    el: '#app',
		    data: {
					
		    }
      })
			</script>

Vue.extend()

调用Vue.extend()创建的是一个组件构造器
通常在创建组件构造器时，传入template代表我们自定义组件的模版。
该模版就是使用到组件的地方，要显示的HTML代码
不过现在从vue2.x之后几乎不像这样写了

Vue.component()

调用Vue.component()是将刚才的组件构造器注册成一个组件，并且给它起一个组件的标签名称。
所以要传入两个参数：1、注册组件的标签名 2、组件构造器

组件还需要挂载在某个vue实例下才会生效

二、全局组件和局部组件

直接在script中写这个的就是全局组件

Vue.component('my-cpn', cpnC)

如果在vue实例下注册就是局部组件

compotents: {
	//cpn使用组件时的标签名
	cpn: cpnC 
}

父组件和子组件

				//子组件
				const cpnC1 = Vue.extend({
					template: `
					<div>
						<h2>
							标题
						</h2>
					</div>`
				})
				
				//父组件
				const cpnC2 = Vue.extend({
					template: `
					<div>
						<h2>
							标题
						</h2>
						<cpnc1></cpnc1>
					</div>`,
					components: {
						cpnc1: cpnC1
					}
				})
        
        //root组件
		    const app = new Vue({
		    el: '#app',
		    data: {
					
		    }
				
				components:{
					cpnc2: cpnC2
				},
				})

组件的语法糖使用

省去了调用Vue.extend()的步骤，而是直接可以使用一个对象来代替。

全局组件创建注册语法糖：

Vue.component('my-cpn', {
  template: `
					<div>
						<h2>
							标题
						</h2>
						<cpnc1></cpnc1>
					</div>`
})

局部组件创建注册语法糖：

const app = new Vue({
		    el: '#app',
		    data: {
					
		    }
				
				components:{
					'cpn2': {
						template: `
					<div>
						<h2>
							标题
						</h2>
						<cpnc1></cpnc1>
					</div>`
					}
				},
				})

若在script中写太多html代码不好看，可以将其分离：

<script type="text/template" id="cpn">
			<div>
				<h2>
					title
				</h2>
			</div>
</script>

//或者使用template标签
<template id="cpn">
			<div>
				<h2>
					title
				</h2>
			</div>
</template>
		
<script src="vue.js"></script>
		<script>
			Vue.component('my-cpn', {
			  template: '#cpn'
			})
			
			const app = new Vue({
				el: '#app',
				data: {
			
				}
</script>

组件不可以访问vue实例数据。vue组件应该有自己保存数据的地方。

组件数据存于data()中，data必须是一个函数，其返回一个对象，对象内部保存数据。
Vue.component('my-cpn', {
template: `#cpn`, 
data() {
 return {
   title: 'abc'
 }
}
})

三、父子组件之间传递数据

父传子：props

		<!-- Vue实例模版 -->
		<div id="app">
			<!-- 需要使用v-bind语法才可以让Vue识别movies为变量 -->
			<cpn :cmovies="movies" :cmessage= "message"></cpn>
		</div>
		
		<!-- 子组件模版 -->
		<template id="cpn">
			<div>
				<ul v-for="item in cmovies">{{item}}</ul>
				<h2>{{cmessage}}</h2>
			</div>
		</template>
			
		<script src="vue.js"></script>
		<script>
			// 子组件
			const cpn = {
				template: '#cpn',
				props: ['cmovies', 'cmessage'],
				data(){
					return{}
				},
				methods: {
					
				}
			}
			// 父组件
			const app = new Vue({
				el: '#app',
				data: {
					movies: ['1', '2', '3'],
					message: 'www'
				},
				components: {
					cpn
				}
				})
		</script>

props数据验证

props: {
					// 1、类型限制
					comive: Array,
					cmessage: String,
					
					// 2、提供一些默认值，或者一些必传值
					cmessage: {
						type: String,
						default: 'flase',
						required: true
					},
					// 类型是数组或者对象（Array或者Object）的时候，默认值必须是一个函数
					cmovies: {
						type: Array,
						default() {
							return []
						}
					}
				}

子传父（自定义事件）

<!-- 父组件模版 -->
		<div id="app">
			<cpn @item-click="cpnClick"></cpn>
		</div>
		
		<!-- 子组件模版 -->
		<template id="cpn">
			<div>
				<button v-for="item in catagories"
								@click="btnClick(item)"
				>{{item.name}}</button>
			</div>
		</template>
			
		<script src="vue.js"></script>
		<script>
			// 子组件
			const cpn = {
				template: '#cpn',
				
				data() {
					return {
						catagories: [
							{id: 'aaa', name: 'one'},
							{id: 'bbb', name: 'two'},
							{id: 'ccc', name: 'three'},
						]
					}
				},
				methods: {
					btnClick(item) {
						// 发射事件： 自定义事件
						this.$emit('item-click', item)
					}
				}
			}
			// 父组件
			const app = new Vue({
					el: '#app',
					data: {
					},
					components: {
						cpn
					},
					methods:{
						cpnClick(item) {
							console.log('cpnClick', item);
						}
					}
				})
		</script>

自定义事件的流程

在子组件中，通过$emit()来触发事件。
在父组件中，通过v-on来监听子组件事件

四、父子组件的访问

父组件访问子组件：$children或$refs
子组件访问父组件：$parent

父访问子

$children：一般用于取出所有子组件的message状态。

<div id="app">
  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
  <button @click="btnClick">1212</button>
</div>

<template id="cpn">
  <div>我是子组件</div>
</template>

<script src="vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好！'
    },
    methods: {
      btnClick() {
        // 1、$children
        console.log(this.$children);
        console.log(this.$children[2].name);
      }
    },
    components: {
      cpn: {
        template: '#cpn',
        data() {
          return {
            name: '子组件的name'
          }
        }
      },
    }
  })
</script>

$refs =>对象类型，默认是一个空对象
```
<cpn ref="aaa"></cpn>

 btnClick() {
        //2、$refs
      console.log(this.$refs.aaa);
      }
```
主要参考这个教学视频学习：https://www.bilibili.com/video/BV15741177Eh?p=1

Ming-hl

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记(5)--组件化的基本使用、父子组件间的访问和传递数据

一、组件化的基本使用创建组件构造器对象const cpnC = Vue.extend({ template: ` <div> <h2> 标题 </h2> </div>` })``(模版字符串)是ES6中的新的定义字符串的语法，最大的特点就是可以换行//使用''...
复制链接

扫一扫