09、Vue-全局组件中插槽的使用

09、Vue-全局组件中插槽的使用


<html>
	<head>
		<meta charset="utf-8">
		<title>行找的皮卡丘title>
		<style type="text/css">
			.default {
				display: inline-block;
				line-height: 1;
				white-space: nowrap;
				cursor: pointer;
				background: #fff;
				border: 1px solid #dcdfe6;
				color: #606266;
				-webkit-appearance: none;
				text-align: center;
				box-sizing: border-box;
				outline: none;
				margin: 0;
				transition: .1s;
				font-weight: 500;
				-moz-user-select: none;
				-webkit-user-select: none;
				-ms-user-select: none;
				padding: 12px 20px;
				font-size: 14px;
				border-radius: 4px;
			}

			.primary {
				color: #fff;
				background-color: #409eff;
				border-color: #409eff;
			}

			.success {
				color: #fff;
				background-color: #67c23a;
				border-color: #67c23a;
			}
		style>
	head>
	<body>
		<div id="app">


		div>

	body>
	<script type="text/javascript" src="js/vue.min.js">

	script>

	<script type="text/javascript">
		// 声明全局组件 可以在任意组件中进行使用  Vue.componet('组件名称',{template:``,})
		Vue.component('Vbtn', { // 声明并且已经挂载到全局 可以在任意地方使用
			template: `
				
				
				
			`,
			props: ['type']
		});


		// 声明组件并挂载到App组件中
		var Vheader = {
			data() {
				return {

				}
			},
			template: `
				
我是头部组件 成功按钮 `, }; var Vaside = { data() { return { } }, template: `
我是侧边栏组件 主要按钮
`
, } var Vcontent = { data() { return { } }, template: `
我是内容组件
`
, } // 1、声明组件 组件内的data一定是一个函数,必须有返回值空值也行 var App = { data() { return { } }, template: `
`
, components: { Vheader, Vaside, Vcontent }, }; new Vue({ el: "#app", data() { return { } }, // 2、挂载 components: { App }, // 3、使用 template: ``, }); script> html>

你可能感兴趣的:(Vue学习基础)