Vue组件

最新推荐文章于 2024-05-22 10:04:18 发布

Amodoro

最新推荐文章于 2024-05-22 10:04:18 发布

阅读量103

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_40230735/article/details/103549285

版权

笔记专栏收录该内容

19 篇文章 1 订阅

订阅专栏

使用构造器创建组件

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
<!--    3.在vue实例中使用组件-->
    <my-cpn></my-cpn>
    <my-cpn></my-cpn>
  </div>
  <script src="../vue.js"></script>
  <script>
    // 1.创建组件构造器
    const myComponent = Vue.extend({
      template: `
        <div>
          <h2>我是标题</h2>
        </div>
      `
    })
    // 2.注册组件，并定义组件标签名称
    Vue.component('my-cpn', myComponent)

    // vue实例
    const app = new Vue({
      el: '#app'
    })
  </script>
</body>
</html>

使用构造器创建父子组件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn2></cpn2>
</div>

<template id="tmp">
  <div>{{title}}</div>
</template>

<template id="tmp2">
  <div>
    <div>我是标题2</div>
  <cpn></cpn>
  </div>
</template>
<script src="../vue.js"></script>
<script>
  let cpn = Vue.extend({
    template: '#tmp',
    data(){
      return {
        title: '我是标题1'
      }
    }
  })

  let cpn2 = Vue.extend({
    template: '#tmp2',
    components: {
      cpn
    }
  })

  // 全局注册
  // Vue.component('cpn2',cpn2)

  let app = new Vue({
    el: '#app',
    data: {

    },
    // 局部注册
    components: {
      cpn2
    }
  })
</script>
</body>
</html>

组件注册语法糖

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <cpn1></cpn1>
  <cpn2></cpn2>
</div>

<script src="../vue.js"></script>
<script>
  // 注册组件
  Vue.component('cpn1', {
    template: `
      <div>
        <h2>{{title}}</h2>
        <p>我是内容, 哈哈哈哈</p>
      </div>
    `,
		data(){
			return {
				title: '我是标题1'
			}
		}
  })

  // 注册局部组件的语法糖
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      'cpn2': {
        template: `
          <div>
            <h2>我是标题2</h2>
            <p>我是内容, 呵呵呵</p>
          </div>
    `
      }
    }
  })
</script>

</body>
</html>

父组件传值子组件props，props的多种书写方式

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
	</head>
	<body>
		<div id="app">
			<!-- <cpn :movies="movies" :message="message"></cpn> -->
			<!-- message不传值会显示默认值aaaaaa-->
			<cpn :movies="movies"></cpn>
		</div>

		<template id="tmp">
			<div>
				<h3>{{message}}</h3>
				<ul>
					<li v-for="(item,index) in movies" :key="index">{{item}}</li>
				</ul>
			</div>
		</template>

		<script src="../vue.js"></script>
		<script>
			// 子组件
			const cpn = {
				template: '#tmp',
				//数组的方式
				// props: ['movies','message']
				// 对象的方式
				// props: {
				// 	movies: Array,
				// 	message: String
				// }
				// 多个数据类型
			    // propsA: [String, Number]
				props: {
					movies: {
						type: Array,
						// 默认值
						default: []
					},
					message: {
						type: String,
						default: 'aaaaaa'
					}
				}
			}

			const app = new Vue({
				el: '#app',
				data: {
					message: '父组件信息',
					movies: ['海王', '海贼王', '海尔兄弟']
				},
				components: {
					cpn
				}
			})
		</script>
	</body>
</html>

子组件传值驼峰命名在模板中的书写

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
		<!-- 注意：这里是这样写的 -->
		<cpn :c-info="info"></cpn>
  </div>
	<template id="tmp">
		<div>
			{{cInfo.name}}
		</div>
	</template>
  <script src="../vue.js"></script>
	<script type="text/javascript">
		let cpn = {
			template: '#tmp',
			props: {
				// 驼峰命名的传值名
				cInfo: {
					type: Object,
					default(){
						return {
							
						}
					}
				}
			}
		}
		const app = new Vue({
			el: '#app',
			data: {
				info: {
					name: 'tom',
					age: 28
				}
			},
			components: {
				cpn
			}
		})
	</script>
</body>
</html>

子传父，this.$emit

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 父组件通过事件接收数据 -->
			<cpn @childclick="childclick"></cpn>
		</div>
		<template id="tmp">
			<div>
				<!-- 子组件点击的时候发送数据 -->
				<button type="button" 
				v-for="item in fenlei"
				@click="childClick(item)"
				>{{item.name}}</button>
			</div>
		</template>
		<script src="../vue.js"></script>
		<script type="text/javascript">
			const cpn = {
				template: '#tmp',
				data() {
					return {
						fenlei: [
							{id: 'aaa', name: '热门推荐'},
							{id: 'bbb', name: '手机数码'},
							{id: 'ccc', name: '家用家电'},
							{id: 'ddd', name: '电脑办公'},
						]
					}
				},
				methods: {
					childClick(item) {
						// 发送数据到父组件
						this.$emit('childclick',item)
					}
				}
			}
			const app = new Vue({
				el: '#app',
				components: {
					cpn
				},
				methods: {
					childclick(item) {
						console.log('子传父成功',item)
					}
				}
			})
		</script>
	</body>
</html>

Amodoro

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue组件

使用构造器创建组件使用构造器创建父子组件<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial...
复制链接

扫一扫