Vue组件
Vue组件
组件的特点
1.组件其实就是html，css，js组成的独立单位，可以复用
2.组件也是一个vue对象
3.一个界面一般只有一个根组件，在它内部可以有很多的子组件
4.html内的为真实DOM，组件的trmplate为虚拟DOM，真实的DOM会被虚拟DOM替换（根组件一般不提供template，提供了也需要在里面提供挂载点）
一个简单组件
案例里面的根组件有template，所以会替换掉真实的dom，并且组件中的data和methods继续对虚拟dom起作用，但是虚拟dom必须要有挂载点
<!DOCTYPE html>
<html>
<head>
<title>VUE</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="">
{{ msg }}
</div>
<script type="text/javascript">
let c1 = '';
new Vue({
el: '#app',
data: {
msg: '12345',
c1: 'red'
},
template: `
<div ">
<p :style="{color: c1}">{{ msg }}</p>
<p @click="clickAction">{{ msg }}</p>
</div>
`,
methods: {
clickAction() {
console.log(this.msg)
}
}
})
</script>
</body>
</html>
子组件
子组件其实也是一个vue对象，所以它的结构和根组件是很相似的，但是它不需要挂载点，靠标签显示，要注意的是，创建好子组件，需要到根组件里面去注册才能使用（有两种方式如下）
<!DOCTYPE html>
<html>
<head>
<title>VUE</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<zx></zx>
<zx></zx>
<zx></zx>
</div>
<script type="text/javascript">
let c1 = '';
let zx = {
template: `
<p>hello !</p>
`
};
new Vue({
el: '#app',
components:{
zx,
}
})
</script>
</body>
</html>
// 全局组件，不要注册就可以直接使用
Vue.component('tag', {
template: `
<div>
<p>子组件</p>
</div>
`,
});
父向子组件传值
通过属性的形式向子组件传递数据
传值的步骤
1.在子组件的标签添加属性，绑定父组件数据
2.然后在子组件中的props:['da']注册一下，就能在template中使用了（反射）
3.但是要注意的是，这个数据是共享的
子组件独立数据
子组件中也有data，是组件独立的数据区域，要注意数据是通过返回值的方式的
<!DOCTYPE html>
<html>
<head>
<title>VUE</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p @click="fzx">{{ msg }}</p>
<zx :da="msg"></zx>
<zx></zx>
<zx :da="msg"></zx>
</div>
<script type="text/javascript">
let c1 = '';
let zx = {
props:['da'],
template: `
<p @click="fn">{{ da }} !{{ num }}</p>
`,
data(){
return{
num:0
}
},
methods:{
fn(){
this.num++
}
}
};
new Vue({
el: '#app',
data:{
msg:'美女你好'
},
components:{
zx,
},
methods:{
fzx(){
this.msg+=1
}
}
})
</script>
</body>
</html>
子向父传值
通过发布订阅模式$emit(事件，参数)**，子组件发布一个事件，父组件之前恰好之间就已经订阅了这个事件，那么子组件就可以通过发布订阅的形式，向父组件发布数据了。
传值步骤
子组件的template
1.this.$emit('f1',this.num)
子组件真实dom
2.<zx @f1="get_num"></zx>
父组件的methods
3.get_num(num){
this.msg=num
}
<!DOCTYPE html>
<html>
<head>
<title>VUE</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p >{{ msg }}</p>
<zx @f1="get_num"></zx>
</div>
<script type="text/javascript">
let c1 = '';
let zx = {
template: `
<p @click="fn">{{ num }}</p>
`,
data(){
return{
num:0
}
},
methods:{
fn(){
this.num++;
this.$emit('f1',this.num)
}
}
};
new Vue({
el: '#app',
data:{
msg:'美女你好'
},
components:{
zx,
},
methods:{
get_num(num){
this.msg=num
}
}
})
</script>
</body>
</html>
