全局组件
三步走: 创建vue-->注册全局组件-->在页面中使用全局组件
<body>
<div id="box">
# 第三步 使用(在布局页面中使用)
<global_component></global_component>
</div>
<script>
# 第二步 注册(绑定关系,创建全局组件)
Vue.component('global_component',{
template:`<h2> hello world! </h2>`,
});
# 第一步 创建vue
new Vue({
el:'#box',
})
</script>
</body>
局部组件
第一种用法:简单使用,跟全局组件类似(三步走),但是会渲染进DOM
<body>
<div id="demo">
# 第三步:在布局中使用
<my_component></my_component>
</div>
<script>
# 第一步:定义一个object类型的变量
let local_component = {
template:`<h2> hello world! </h2>`
};
new Vue({
el:'#demo',
# 第二步:在创建vue实例中引入定义好的变量
components:{'my_component':local_component}
})
</script>
</body>
第二种用法:以template为根元素,不会渲染进DOM (两步搞定)
局部组件之间的使用
<body>
<div id="demo">
<demo_local></demo_local> # 模板渲染
</div>
<script>
# 定义第一个局部组件变量
let header = {
template:`<h1>{{ local_demo }}</h1>`,
data(){
return {
'local_demo':'唧唧复唧唧,木兰当户织,不闻机杼声,惟闻女叹息!'
}
}
};
# 定义第二个局部组件变量
let footer = {
template:`<h1>{{ local_demo2}}</h1>`,
data(){
return{
'local_demo2':'问女何所思,问女何所忆.'
}
}
};
# 定义第三个局部组件变量
let local = {
template:`<div>
<my_demo3></my_demo3>
<my_demo4></my_demo4>
</div>`,
components:{ # 引入第一第二个局部组件
'my_demo3':header,
'my_demo4':footer
}
};
# 创建vue实例
new Vue({
el:'#demo',
components:{ # 引入第三个局部组件
'demo_local':local
}
})
</script>
</body>
组件之间的传值:
父子组件之间的通信(传值):
-
-
在子组件中使用props接收这个数据(变量名)
<body>
<div id="app">
<app-container></app-container>
</div>
<script>
// 2. 在子组件中使用props接收这个数据
let Header = {
template: `
<div>
{{ fatherData }}
</div>
`,
props: ['fatherData']
};
// 1. 在父组件里面的子组件中绑定一个自定义属性
let Container = {
template: `
<div>
<app-header v-bind:fatherData="fd"></app-header>
</div>
`,
data(){
return {
fd: "我是你爸爸~~~"
}
},
components: {
'app-header': Header,
}
};
new Vue({
el: '#app',
components: {
'app-container': Container
}
})
</script>
子父组件之间的互相传值:
1.在子组件中用过$emit(自定义事件)向外抛出自定义事件
2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>总数：{{ totalNum }}</p>
<my-button v-on:aaa="addTotal"></my-button>
<my-button v-on:aaa="addTotal"></my-button>
<my-button v-on:aaa="addTotal"></my-button>
<my-button v-on:aaa="addTotal"></my-button>
<my-button v-on:aaa="addTotal"></my-button>
<my-button v-on:aaa="addTotal"></my-button>
<my-button v-on:aaa="addTotal"></my-button>
<my-button v-on:aaa="addTotal"></my-button>
<my-button v-on:aaa="addTotal"></my-button>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script>
<script>
// 注册全局组件
Vue.component('my-button', {
template: `<button v-on:click="add">{{ this.num }}</button>`,
data(){
return {
num: 0
}
},
methods: {
add(){
this.num += 1;
// 向父组件抛出一个自定义事件
this.$emit('aaa')
}
}
});
let app = new Vue({
el: '#app',
data: {
totalNum: 0
},
methods: {
addTotal(){
this.totalNum += 1
}
}
})
</script>
</body>
</html>
组件之间的互相传值
1.借助一个空Vue对象
let bus = new Vue()
2.
3.组件2中：mounted(){bus.$on(事件,(值)=>{...})}
// 借助一个空的Vue对象实现组件间通信 let bus = new Vue(); // 大项目用这个VueX //传值的那个组件 let B = { template: ` <div> <h1>这是 子组件： my-mjj </h1> <button v-on:click="add">选我</button> </div> `, data(){ return { num: 0 } }, methods: { add(){ this.num += 1; // 利用bus对象抛出一个自定义事件 bus.$emit('xuanwo', this.num); } } }; //接收的那个组件 let A = { template: ` <div> <h1>这是 子组件： my-alex </h1> <p>my-mjj被选中的次数：{{ num }}</p> </div> `, data() { return { num: 0 } }, mounted(){ // 在文档准备就绪之后就要开始监听bus是否触发了 xuanwo 的事件 bus.$on('xuanwo', (val)=> { // this.num += 1; // ? console.log(val); console.log(this); // this 是组件A this.num = val; }) } };
父组件监听子组件原生的事件
使用.native修饰符
<body>
<div id="app">
<!--3.使用子组件-->
<!--此处属于父组件的作用域-->
<!--在父组件监听子组件的原生事件-->
<my-test
v-on:click.native="add"
v-bind:name="sb"
></my-test>
<my-test2
v-on:zdy="aaa"
v-bind:name="sb"
></my-test2>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script>
<script>
// 1.声明子组件 （组件名首字母最好大写）
let Test = {
props: ['name'],
template: `<button>hello {{ name }}</button>`
};
let Test2 = {
template: `<button v-on:click="bbb">子组件2</button>`,
methods: {
bbb(){
this.$emit('zdy')
}
}
};
const app = new Vue({
el: '#app',
data: {
sb: 'Alex',
},
methods: {
add(){
alert('hello s16');
},
aaa(){
alert('周翔都不知道问题是什么！');
}
},
// 2. 在Vue根实例中挂载子组件
components: {
'my-test': Test,
'my-test2': Test2,
}
});
</script>
</body>
</html>