初学vue笔记----component组件

组件

  • 组件注册
  • 自定义属性props
  • 自定义事件
  • 插槽

组件注册

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
	head>
	<body>
		<div id="app1">
			
			<button-text >button-text>
			
			<parttest >parttest>
		div>
	body>
	<script src="js/vue.js" type="text/javascript" charset="utf-8">script>
	<script type="text/javascript">
		/**
		 * 组件:能达到复用目的。也有自己的生命周期
		 * 组件注册
		 * 1.vue数组的全局注册(开发中用得较多,一套组件易维护)
		 * 2.vue组件的局部注册(常见场景在引入第三方库)
		 * 命名规则
		 * 1.首字母大写的驼峰式
		 * 2.短横线分隔命名
		 */
		//1.全局注册
		Vue.component('button-text',{
			data(){ //必须是方法
				return{
					title:"我是子组件的title",
				}
			},
			template:'',
		})
		var vm=new Vue({
			el:'#app1',
		})
		//2.局部注册
		let parttest = {
			template:''
		}
		var vm=new Vue({
		 	el:'#app1',
			components:{parttest}//使用components局部注册
		})
	script>
html>

自定义属性props

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
	head>
	<body>
		<div id="app1">
			
			<button-text titleprop1="使用自定义的属性">button-text>
			<button-text :titleprop1="titletest1">button-text>
			<button-text >button-text>
		div>
	body>
	<script src="js/vue.js" type="text/javascript" charset="utf-8">script>
	<script type="text/javascript">
		/**
		 * props==properties(自定义属性)
		 * 定义:
		 * 1.数组['属性名1','属性名2'……]
		 * 2.对象定义
		 * 命名:
		 * 大小写不敏感(浏览器会将大写解释成小写)。若命名时以驼峰式命名如postTitle,在html中写属性时写的是post-title
		 * 自定义属性也可以用v-bind。:postTitle使用
		 */
		Vue.component('button-text',{
			data(){
				return{
					title:"我是子组件",
				}
			},
			//数组形式定义
			// props:['titleprop1'],
			//对象形式定义
			// props:{
			// 	titleprop1:String
			// },
			props:{
				titleprop1:{
					type:String,
					require:true,//必填项。虽然写的是ture,但是并不会有什么影响
					default:"我是一个默认值"
				}
			},
			template:' ',
		})
		var vue_component=new Vue({
			el:'#app1',
			data(){
				return{
					titletest1:"我是父组件的值"
				}
			},
		})
	script>
html>

自定义事件

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
	head>
	<body>
		<div id="app1">
			
			<button-text :titleprop1="titletest1" @myevent="pearentfun">button-text>
		div>
	body>
	<script src="js/vue.js" type="text/javascript" charset="utf-8">script>
	<script type="text/javascript">
		/**
		 * 自定义事件
		 * 在子组件中用this.$emit('myevent') 传递自定义事件。
		 *   其中my-event子组件中自定义事件名,doSomething是在父组件中的,可以是方法
		 * 自定义事件好处
		 * 1.子组件可以很好利用父组件,可以把子组件数据传递给父组件
		 * 2.通过自定义事件,可以很好修改父组件数据,实现数据同步
		 */
		Vue.component('button-text',{
			data(){
				return{
					title:"我是子组件",
				}
			},
			template:'',
			methods:{
				clickme(){
					this.$emit("myevent",{name:"我是子组件的参数name值"})
				}
			}
		})
		var vue_component=new Vue({
			el:'#app1',
			data(){
				return{
					titletest1:"我是父组件的值"
				}
			},
			methods:{
				pearentfun(obj){
					console.log("你现在点击的是子组件传过来的一个自定义事件哦!")
					console.log("参数name:",obj.name)
				}
			}
		})
	script>
html>

插槽

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
	head>
	<body>
		<div id="app1">
			
			<button-text >我是父组件,我要使用子组件的插槽button-text>
			<button-text >{{titletest1}}button-text>
			<button-text >button-text>
		div>
	body>
	<script src="js/vue.js" type="text/javascript" charset="utf-8">script>
	<script type="text/javascript">
				Vue.component('button-text',{
			data(){
				return{
					title:"我是子组件",
				}
			},
			template:' ',
		})
		var vue_component=new Vue({
			el:'#app1',
			data(){
				return{
					titletest1:"我是父组件的值"
				}
			},
		})
	script>
html>

你可能感兴趣的:(vue)