带着实例继续学习(1):组件式登录页面-点击事件、组件通讯<四>

本文链接：https://blog.csdn.net/design321/article/details/79668116

安装文件插件

npm install file-loader --save-dev

更新webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
module.exports = {
	entry:{
		"index":[__dirname+'/src/js/index.js',
				'webpack-dev-server/client?http://127.0.0.1:8080'
		]
	},
	output:{
		publicPath:"http://127.0.0.1:8080/",
		path:__dirname+'/src/webapp/js',
		filename:'[name].js'
	},
	resolve:{
		alias:{
			vue:'vue/dist/vue.js'
		},
	},
	externals:{

	},
	module:{
		loaders:[
			{
				test:/\.js$/,
				loader:"babel-loader",
				query:{compact:true}
			},
			{
				test:/\.vue$/,
				loader:"babel-loader!vue-loader",
				exclude:"/node_modules/"
			},
			{
				test:/\.css$/,
				loader:"style-loader!css-loader",
			},
			{
				test:/\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
				loader:"file-loader",
			},
			
		]
	},
	plugins:[
		new HtmlWebpackPlugin({
			/*filename:__dirname+'/src/webapp/index.html',*/
			filename:"index.html",
			template:__dirname+'/src/html/index.html',
			inject:'body',
			hash:true,
			chunks:['index']
		})
	]

}

/html/index.html

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div id="main">
		<userlogin ></userlogin>
	</div>
</body>
</html>

/js/index.js

import Vue from "vue";


/*引用组件*/
import userlogin from '../components/user-login.vue';


/*实例化组件*/
let params = {
	el: '#main',
	components:{
		'userlogin': userlogin,
	}
}
new Vue(params);

/components/user-login.vue

<template>
	<div id="user" class="col-md-8 col-md-offset-2">
		<h2 class="text-center"></h2>
		<form class="form-horizontal">
			<username placeholder="请输入用户名" ref="uname"></username>
			<usersubmit></usersubmit>
		</form>
	</div>
</template>

<style type="text/css">
	@import './../css/bootstrap.css';
	#user{
		margin-top:50px;
	}
</style>

<script>
	import username from './user/user-name.vue';
	import usersubmit from './user/user-submit.vue';


	export default{
		components:{
			'username':username,'usersubmit':usersubmit,
		}
	}
</script>

/components/user/user-name.vue

<template>
	<div>
		<div class="form-group">
			<label  class="col-sm-2 control-label">用户名:</label>
			<div class="col-sm-10">
		      <input type="text" class="form-control" v-model="username" :placeholder="placeholder" />
		    </div>
		</div>
	    
	</div>
</template>

<script>
export default{
	props:['placeholder'],
	data:function(){
		return {'username':''}
	}
}
	
</script>

/components/user/user-submit.vue

<template>

	    <div class="form-group">
			<div class="col-sm-offset-2 col-sm-10">
		      <button type="button" class="btn btn-success" v-on:click="test">提交</button>
		    </div>
	    </div>
	
</template>

<script>
export default{
	
	methods:{
		test:function(){
			alert(this.$parent.$refs.uname.$data.username)
		}
	}
}
	
</script>

效果：