1 组件
组件即封装的功能。
1.0 局部组件
局部组件使用Vue.extend(“component-name”, object)定义,或者直接使用var定义,需要在Vue对象中注册使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="vue.js"></script>
<script>
// 局部组件
var MyHeader = {
template:`
<div>
<h1>组件Components</h1>
</div>
`
}
var MyBody = {
template:`
<div>
<div>One</div>
<div>Two</div>
</div>
`
}
new Vue({
el: "#app",
components: {
MyHeader,
MyBody
},
template:`
<div>
<my-header></my-header>
<my-body></my-body>
</div>
`,
data:function() {
return {
variableName:"我是变量值"
}
},
methods:{
methodName: function() {
}
},
})
</script>
</body>
</html>
1.2 全局组件
全局组件使用Vue.component(“component-name”, object)定义,无需注册,全局使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue学习</title>
</head>
<body>
<div id="app"></div>
<script src="vue.js"></script>
<script>
// 全局组件
Vue.component("MyFooter", {
template: `
<div>
<div>---------------</div>
</div>
`
})
// 局部组件
var MyHeader = {
template:`
<div>
<h1>组件Components</h1>
</div>
`
}
var MyBody = {
template:`
<div>
<div>One</div>
<div>Two</div>
</div>
`
}
new Vue({
el: "#app",
components: {
MyHeader,
MyBody
},
template:`
<div>
<my-header></my-header>
<my-body></my-body>
<my-footer></my-footer>
</div>
`,
data:function() {
return {
variableName:"我是变量值"
}
},
methods:{
methodName: function() {
}
},
})
</script>
</body>
</html>
2 父子组件获取信息
父组件与子组件即函数调用与被调用关系,而Vue中可以实现:
(1)父组件获取子组件所有信息,使用mounted,结合this.$
refs.childName实现
(2)子组件获取父组件所有信息,使用created,结合this.$
parent实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue学习</title>
</head>
<body>
<div id="app"></div>
<script src="vue.js"></script>
<script>
var Child = {
template: `
<div>子组件</div>
`,
created: function() {
console.log("我是子组件输出,获取父组件")
console.log(this.$parent)
}
}
var Parents = {
template: `
<div>
父组件
<slot name = "test"></slot>
<child ref = "refsTest"></child>
</div>
`,
components: {
Child
},
mounted: function() {
console.log("我是父组件输出,获取子组件")
console.log(this.$refs.refsTest)
}
}
new Vue({
el: "#app",
components: {
Parents
},
template:`
<div>
<parents>
<div>测试Slot</div>
<div slot="test">测试Slot--具名</div>
</parents>
</div>
`,
data:function() {
return {
variableName:"我是变量值"
}
},
methods:{
methodName: function() {
}
},
watch:{
variableName(){
}
}
})
</script>
</body>
</html>
3 父子组件通信
父子组件相互传递信息。
3.1 父组件向子组件发送信息
(1)在子组件中定义props,声明接收数据的变量
(2)父组件中调用字组件时,对props中定义变量进行赋值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue学习</title>
</head>
<body>
<div id="app"></div>
<script src="vue.js"></script>
<script>
var Child = {
template: `
<div>
<p>子组件</p>
<div>fromParent:{{ fromParents }}</div>
</div>
`,
props: ["fromParents"],
}
var Parents = {
template: `
<div>
父组件
<slot name = "test"></slot>
<child ref = "refsTest" fromParents="父组件数据"></child>
</div>
`,
components: {
Child
},
}
new Vue({
el: "#app",
components: {
Parents
},
template:`
<div>
<parents>
<div>测试Slot</div>
<div slot="test">测试Slot--具名</div>
</parents>
</div>
`,
data:function() {
return {
variableName:"我是变量值"
}
},
})
</script>
</body>
</html>
3.2 子组件向父组件发送信息
子组件向父组件发送消息,实现步骤:
(1)子组件中定义发送事件,通过this.$emit(“eventName”, data)定义发送事件
(2)父组件中接收该事件,即@eventName=“funcitonName”,并定义接收数据的函数名称,在methods中定义接收子事件数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue学习</title>
</head>
<body>
<div id="app"></div>
<script src="vue.js"></script>
<script>
var Child = {
template: `
<div>
<p>子组件</p>
<div>fromParent:{{ fromParents }}</div>
<button @click="toParent">向父组件发送信息</button>
</div>
`,
props: ["fromParents"],
methods:{
toParent: function() {
this.$emit("toParentEvent", "我来自子组件")
}
}
}
var Parents = {
template: `
<div>
父组件
<slot name = "test"></slot>
<child ref = "refsTest" fromParents="父组件数据" @toParentEvent="fromChild"></child>
<div>来自子组件的消息:{{ msg }}</div>
</div>
`,
components: {
Child
},
data: function() {
return {
msg: ""
}
},
methods: {
fromChild: function(val) {
this.msg = val
}
}
}
new Vue({
el: "#app",
components: {
Parents
},
template:`
<div>
<parents>
<div>测试Slot</div>
<div slot="test">测试Slot--具名</div>
</parents>
</div>
`,
})
</script>
</body>
</html>