Vue表单输入绑定、组件、插槽的使用（三）
一、表单输入绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="container">
<div>
<!-- 各表单类型的输入绑定 -->
<ol>
<li> 文本框</li>
<li> 密码框</li>
<li> 单选按钮</li>
<li> 复选框</li>
<li>下拉列表</li>
</ol>
</div>
<hr>
<label>
<p>
<input type="text" placeholder="文本框" v-model="username" />
</p>
</label>
<label>
<p>
<input type="password" placeholder="密码框" v-model="password">
</p>
</label>
<br>
<label>
<p>
<input type="radio" v-model="sex" value="男">男
<input type="radio" v-model="sex" value="女">女
</p>
</label>
<br>
<label>
<p>
<input type="checkbox" v-model="hobbies" value="篮球">篮球
<input type="checkbox" v-model="hobbies" value="足球">足球
<input type="checkbox" v-model="hobbies" value="羽毛球">羽毛球
<input type="checkbox" v-model="hobbies" value="乒乓球">乒乓球
</p>
</label>
<hr>
<p>下拉单选</p>
<label>
<select v-model="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
</select>
</label>
<hr>
<p>下拉多选</p>
<label>
<select v-model="cities" multiple>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
</select>
</label>
<button type="button" class="btn btn-success"@click="test">测试</button>
</div>
</body>
<script src="./js/vue.js"></script>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous">
</script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
</script>
<script>
//根据键盘码设置按键的别名
Vue.config.keyCodes.j = 74;
var vm = new Vue({
el: "#container",
data: {
username: "admin",
password: "111111",
sex: "男",
hobbies: [],
city: "北京",
cities: ["北京", "上海"]
},
methods: {
test:function(){
console.log('用户名:'+vm.username+'密码:'+vm.password)
console.log(vm.sex)
console.log(vm.hobbies)
console.log(vm.city)
console.log(vm.cities)
}
}
})
</script>
</html>
二、组件
对一些通用的html模块进行封装-可复用
示例：
新建js文件，注册组件
Vue.component('header-nav', {
data: function() {
/* 组件中data数据通过函数返回 */
return {
// title:'JD狗'
str2:"你好"
}
},
template: `
<div>
<ul class="nav-header">
<li>
<img src="./img/logo.png" width="200px" height="60px">
</li>
<li>
{{title}}
</li>
<li>
<button type="button" @click='childMethod'>组件测试</button>
</li>
</ul>
</div>
`,
props: ['title'], //组件通信时接收父组件【引用组件的Vue实例】传递的参数对象 - 数据
methods: {
childMethod: function() {
this.$emit("my-componet","hello",'1')
}
},
})
组件调用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="./css/myComponent.css" />
<script src="./js/vue.js"></script>
<script src="./js/my-components.js"></script>
</head>
<body>
<div id="container">
//注册的组件名
<header-nav :title="str" @my-componet="parentMethod"></header-nav>
获取组件传递过来的数据{{str1}}
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: "#container",
data: {
str:'父组件中的值传给子组件',
str1:''
},
methods: {
parentMethod:function(e,p){
vm.str1 = e+p;
}
}
})
</script>
</html>
三、组件通信
1、父传子
封装的组件中使用props属性接收父组件传递过来的值
例：props：[ 接收需要父组件传入参数]
2、子传父
不能直接通过父组件的事件方法传，
但是可以通过“调用”父组件的函数，通过函数来传值
子组件
Vue.component('header-nav', {
data: function() {
/* 组件中data数据通过函数返回 */
return {
// title:'JD狗'
str2:"你好"
}
},
template: `
<div>
<ul class="nav-header">
<li>
<img src="./img/logo.png" width="200px" height="60px">
</li>
<li>
{{title}}
</li>
<li>
<button type="button" @click='childMethod'>组件测试</button>
</li>
</ul>
</div>
`,
props: ['title'], //组件通信时接收父组件【引用组件的Vue实例】传递的参数对象 - 数据
methods: {
childMethod: function() {
this.$emit("my-componet","hello",'1')
}
},
})
父组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="./css/myComponent.css" />
<script src="./js/vue.js"></script>
<script src="./js/my-components.js"></script>
</head>
<body>
<div id="container">
<header-nav :title="str" @my-componet="parentMethod"></header-nav>
获取组件传递过来的数据{{str1}}
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: "#container",
data: {
str:'父组件中的值传给子组件',
str1:''
},
methods: {
parentMethod:function(e,p){
vm.str1 = e+p;
}
}
})
</script>
</html>
四、组件插槽
从vue实例对象的父组件需要往子组件中添加html标签元素时， 封装的组件中需要定义一个插槽 也就是在需要添加元素的地方给定一个
标签
4.1、插槽的使用
Vue.component("page-frame",{
template:`
<div>
<div style="height: 60px; background-color: pink;">{{headerTitle}}</div>
<div style="height: 500px;">
<slot></slot>
</div>
<div style="height: 40px;background-color: green;">3</div>
</div>
`,
data:function(){
return{
}
},
props:['headerTitle']
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="./css/myComponent.css" />
<script src="./js/vue.js"></script>
<script src="./js/my-components.js"></script>
</head>
<body>
<div id="container">
<page-frame :headerTitle="标题">
<template>
<table>
<tr>
<th>编号</th>
<th>学号</th>
<th>姓名</th>
</tr>
</table>
</template>
</page-frame>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: "#container",
data: {
}
})
</script>
</html>
4.2、具名插槽
组件中需要有大于1个<slot><slot>
时，需要为每个solt定义一个名字，【name属性】，指定具体添加到哪
4.3、插槽的作用域
定义组件时，将data数据绑定到solt中，父组件可以直接调用
