vuejs笔记之组件写法(全局写法/局部写法)

责编:menVScode 2017-09-30 23:02 阅读(956)

组件全局的写法:Vue.component()中有2个参数,参数1:组件的名字,参数2:组件的内容;template是定义组件的内容。

<div id="app">
	<child01>11</child01>
	<child02></child02>
</div>
// 参数1:组件的名字,参数2:组件的内容
Vue.component('child01',{
	template: '<div><h1>这里是子组件</h1><child02></child02></div>',//定义html内容
});
Vue.component('child02',{
	template: '<h2>这里是第二个子组件</h2>',
});
new Vue({
	el:'#app'
})


组件的局部写法:

<div id="app">
	<child01></child01>
</div>
new Vue({
	el:'#app',
	components:{
		'child01':{
			template:'<h2>这是一个组件</h2>',
			style:'',
			script:''
		},
		'child02':{
			template:'<h2>这又是一个组件</h2>',
		}
	}
})


子组件所使用到的数据,必须是一个函数,数据用return返回;

<div id="app">
	<component01></component01>
</div>
Vue.component('component01',{
	template:'<h3 @click="doClick">{{name}}</h3>',
	//子组件所使用到的数据,必须是一个函数,数据用return返回;
	data:function() {
		return { //组件需要的数据是放在大括号内
			name:'menvscode'
		}
	},
	methods:{
		doClick:function(){
			alert('子组件');
		}
	},
});
new Vue({
	el:'#app',
	methods:{
		doClick:function(){
			alert('父组件组');
		}
	}
});
标签: 组件 vuejs
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码