109 lines
2.5 KiB
HTML
109 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>component</title>
|
||
</head>
|
||
<body>
|
||
<div class="app">
|
||
<about ref="about" title="我是" @setdata="getdata" @getfather="getd"></about>
|
||
<love_p :test="geiLove"></love_p>
|
||
</div>
|
||
</body>
|
||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
||
<script>
|
||
// 全局组件
|
||
// 局部组件
|
||
|
||
// 父组件 -> 子组件 传递数据 props
|
||
// 子组件 -> 父组件 传递数据 $emit提交一个事件，可以携带数据
|
||
|
||
// 全局组件
|
||
Vue.component('love_p', {
|
||
props: ['test'],
|
||
template: `
|
||
<div>
|
||
<h2>{{title}}</h2>
|
||
<p>{{ test }}</p>
|
||
</div>
|
||
`,
|
||
data() {
|
||
return {
|
||
title: '组件 love_p'
|
||
}
|
||
},
|
||
methods: {
|
||
|
||
}
|
||
});
|
||
|
||
// 局部组件
|
||
var about = {
|
||
// props: ['title'],
|
||
props: {
|
||
title: {
|
||
type: String,
|
||
default: '默认数值',
|
||
validator: function(val) {
|
||
return val.length < 3;
|
||
}
|
||
}
|
||
},
|
||
template: `
|
||
<div>
|
||
<div>{{title | checkTitle}}</div>
|
||
<h1 @click="hello">哈哈哈哈</h1>
|
||
</div>
|
||
`,
|
||
filters: {
|
||
checkTitle(res) {
|
||
return res + ' - 过滤后的数据';
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
goLoveP: "我是需要给love_p的数据"
|
||
}
|
||
},
|
||
created() {
|
||
this.$emit("getfather", this.goLoveP);
|
||
},
|
||
mounted() {
|
||
console.log(this.$parent.$children[1].title = "偷偷修改lovep");
|
||
},
|
||
methods: {
|
||
ceshi() {
|
||
console.log("被父亲调用");
|
||
},
|
||
hello() {
|
||
this.$emit('setdata','子组件数据')
|
||
}
|
||
}
|
||
};
|
||
|
||
new Vue({
|
||
el: '.app',
|
||
data: {
|
||
geiLove: ""
|
||
},
|
||
mounted() {
|
||
this.$refs.about.ceshi()
|
||
},
|
||
methods: {
|
||
getd(val) {
|
||
console.log("val ===== ",val);
|
||
this.geiLove = val;
|
||
},
|
||
getdata(res) {
|
||
console.log(res);
|
||
}
|
||
},
|
||
components: {
|
||
// 'lb_about': about
|
||
about
|
||
}
|
||
})
|
||
|
||
</script>
|
||
</html> |