<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--自定义属性num1-->
<counter :num1="num"></counter>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script> Vue.component("counter",{
//使用props接收到的属性来渲染页面
template: "<button @click='num1++'>点我呀，点我加1。{{num1}}</button>",
// 通过props来接收一个父组件传递的属性
props: ["num1"]
})
const app= new Vue({
el:"#app",
data: {
num: 0
}
}) </script>
</html>
效果：
[](
)props验证
我们定义一个子组件，并接收复杂数据：
<!--自定义属性num1-->
<counter :num1="num1" :num2="num2"></counter>
......
Vue.component("counter",{
//子组件模板有且只有一个根标签
template: "<button @click='num1++,num2++'>{{num1}}+{{num2}}={{num1+num2}}</button>",
props: {
num1: {
type: Number,
default: 0
},
num2: {
type: Number,
default: 0
}
}
})
const app= new Vue({
el:"#app",
data: {
num1: 1,
num2: 2
}
})
子组件可以对 items 进行迭代，并输出到页面。 props：定义需要从父组件中接收的属性
-
items：是要接收的属性名称
-
type：限定父组件传递来的必须是数组
-
default：默认值
-
required：是否必须
-
当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告，但还是会执行
运行效果：
type类型，可以有：
[](
)子向父的通信：$emit
子组件接收到父组件属性后，默认是不允许修改的。既然只有父组件能修改，那么加和减的操作一定是放在父组件：
const app= new Vue({
el:"#app",
data: {
num: 0
},
methods:{
incr(){
this.num++;
}
}
})
但是，点击按钮是在子组件中，那就是说需要子组件来调用父组件的函数，怎么做？
我们可以通过v-on指令将父组件的函数绑定到子组件上：
<div id="app">
<counter :num1="num" @incr1="incr()"></counter>
<counter :num1="num" @incr1="incr()"></counter>
<counter :num1="num" @incr1="incr()"></counter>
</div>
在子组件中定义函数，函数的具体实现调用父组件的实现，并在子组件中调用这些函数。当子组件中按钮被点击时，调用绑定的函数：
Vue.component("counter",{
template: "<button @click='subIncr'>点我呀，点我加1。{{num1}}</button>",
props: {
num1: {
type: Number,
default: 0
}
},
methods:{
subIncr(){
this.$emit("incr1")
}
}
})
vue提供了一个内置的 this.$emit() 函数，用来调用父组件绑定的函数
效果：
[](
)路由vue-router
=========================================================================
实现功能：一个页面，包含登录和注册，点击不同按钮，实现登录和注册页切换
[](
)编写登录及注册组件
新建一个user目录以及login.js及register.js，编写组件，这里我们只写模板，不写功能。
login.js内容如下：
const loginForm = {
template:'\
<div>\
<h2>登录页</h2> \
用户名：<input type="text"><br/>\
密码：<input type="password"><br/>\
</div>\
'
}
register.js内容：
const registerForm = {
template:'\
<div>\
<h2>注册页</h2> \
用 户 名：<input type="text"><br/>\
密  码：<input type="password"><br/>\
确认密码：<input type="password"><br/>\
</div>\
'
}
[](
)编写父组件并引用子组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<span>登录</span>
<span>注册</span>
<hr>
注册页/登录页
<!--html是大小写不敏感的，对于大写字母如F用-f表示-->
<login-form></login-form>
<register-form></register-form>
</div>
</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="js/login.js"></script>
<script src="js/register.js"></script>
<script> const app= new Vue({
el: "#app",
components: {
loginForm,
registerForm
}
}) </script>
</html>
样式：
[](
)使用vue-router模块实现路由功能
vue-router简介和安装
使用vue-router和vue可以非常方便的实现 复杂单页应用的动态路由功能。
官网：[https://router.vuejs.org/zh-cn/](
)
使用npm安装：npm install vue-router --save
在index.html中引入依赖：
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
快速入门：
新建vue-router对象，并且指定路由规则：