1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116
| <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <!--使用自定义组件钩子--> <App></App> </div> <script src="https://mirrors.idiyrom.com/web/js/vue.mini.js"></script> <script>
let vBtn = { data() { return {
} }, props: ["id"], template: ` <div> <button @click="handlerClick">{{ id }}</button> </div> `, methods: { handlerClick() { //每个组件中的this指的就是当前组件对象 this.id++; // this.$emit("父组件声明自定义事件名", "传值"); this.$emit("clickHandler", this.id);
} } };
let vHeader = { data() { return { msg_info: "我是vHeader子组件的数据" } }, //声明挂载父组件的数据 props: ["msg", "post"], //子往父传值,父组件自定义事件 @clickHandler="clickHandler" template: ` <div id="cc"> 我是头部区域组件 <h2>{{ post.info }}</h2> <h2>{{ post.id }} -- {{ post.title }}</h2> <h2>{{ post.content }}</h2> <vBtn :id="post.id" @clickHandler="clickHandler"></vBtn> </div>`, methods: { clickHandler(val) { this.post.id = val; }
}, components: { vBtn } }; //声明组件钩子 let App = { data() { return { msg: "测试", text: "我是父组件App的数据", post: { info: "再次测试", id: 1, title: "Vue从入门到精通", content: "Vue基本语法,Vue基本使用,Vue基本应用" } } }, //:msg="text" 向子组件传递自定义属性 //<vHeader :msg="text"></vHeader> template: ` <div id="bb"> 我是父组件的 {{ post.id }} <vHeader :post="post"></vHeader> 我是一个局部组件钩子 {{ msg }} </div>`, methods: {
}, computed: {
}, created() {
}, components: { vHeader } };
let vm = new Vue({ el: "#app", //template优先级大于el template: `<div id="aa"><App></App></div>`, //将之前什么组件钩子挂载到Vue实例中 components: { App: App } }); </script> </body> </html>
|