1,全局组件和局部组件
<script src="~/Scripts/lib/vue/vue.js"></script>
<div id="app1">
<t_alert></t_alert>
</div>
<div id="app2">
<t_alert></t_alert>
<t_alert></t_alert>
</div>
<script>
//先在vue里面注册组件
//这种是全局的主键,使用 t_alert 作为标签名就可以了
//Vue.component('t_alert', {
// template: '<input type="button" v-on:click="On_Click" value="点击"/>',
// methods: {
// On_Click: function () {
// alert('ok')
// }
// }
//});
//非全局,在指定作用域中,添加主键 components(复数)
var t_alert_component = {
template: '<input type="button" v-on:click="On_Click" value="点击"/>',
methods: {
On_Click: function () {
alert('ok')
}
}
}
new Vue({
el: "#app1",
components: {
't_alert': t_alert_component
}
})
//new Vue({
// el: "#app2",
// data: {
// }
//})
</script>
2,配置组件,数据使用
<div id="app1">
<did></did>
</div>
<style>
.btn {
background-color: red;
}
</style>
<script>
Vue.component('did', {
template: '<button :class="{btn:flag}" v-on:click="On_Click">点一点 {{ count }}</button>',
data: function () {
return {
count: 0,
flag: false,
}
},
methods: {
On_Click: function () {
if (!this.flag) {
this.count++;
} else {
this.count--;
}
this.flag = !this.flag;
}
}
});
new Vue({
el: "#app1"
})
</script>
3,配置组件,template 元素放到 html中
<style>
.btn {
background-color: red;
}
</style>
<div id="app1">
<dyd></dyd>
</div>
<template id="dyd-component-tpl">
<button :class="{btn:flag}" v-on:click="On_Click">点一点 {{ count }}</button>
</template>
<script>
Vue.component('dyd', {
template: '#dyd-component-tpl',
data: function () {
return {
count: 0,
flag: false,
}
},
methods: {
On_Click: function () {
if (!this.flag) {
this.count++;
} else {
this.count--;
}
this.flag = !this.flag;
}
}
});
new Vue({
el: "#app1"
})
</script>
4,自定定义属性向组件传参,外(父)部标签向(子)组件内部传递(
主要用到 组键的 props: [ "zdy" ]
<div id="app1">
<dyd zdy="123" aa="abc"></dyd>
</div>
<template id="dyd-component-tpl">
<button v-on:click="On_Click">点一点 {{ this.name }} {{ this.zdy }}</button>
</template>
<script>
var dydStr = {
template: '#dyd-component-tpl',
props: ["zdy", "aa"], //加入标签的属性名称
methods: {
On_Click: function () {
alert(this.aa)
}
},
data: function () {
return {
name:"测试"
};
}
}
new Vue({
el: "#app1",
components: {
'dyd': dydStr
}
})
</script>
5,子组件向父组件传传递,通过自定义事件,用$emit(eventName)来触发
<div id="app">
<p>{{ son_counter }}</p>
<p>{{ father_show }}</p>
<button-counter v-on:inst="jrsj(arguments)"></button-counter>
<!--注意$emit 传参方式 形参 arguments 是固定的 -->
</div>
<script>
Vue.component('button-counter', {
template: '<button v-on:click="son_click">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
son_click: function () {
this.counter += 1
this.$emit('inst', { 'a': '子json数据' }, this.counter);
}
},
})
var app = new Vue({
el: "#app",
data: {
father_counter: 0,
father_show: ""
},
methods: {
jrsj: function (data) {
this.father_show = data[0].a;
this.father_counter = data[1];
}
}
})
</script>