本文目录：
一、全局组件
<body> <!-- 两个全局vue实例可以不用注册全局组件,就可以使用 --> <div id="app"> <global-tag></global-tag> </div> <div id="main"> <global-tag></global-tag> </div> </body> <script src="js/vue.js"></script> <script> // 创建全局组件 组件名 {} Vue.component('global-tag', { template: "<div @click='fn'>全局组件点击了 {{ count }} 次</div>", data: function () { return { count: 0 } }, methods: { fn: function () { this.count++; } } }); // 两个挂载点 new Vue({ el: "#app", }); new Vue({ el: "#main", }); </script>
二、父组件传递信息给子组件
''' 采用属性绑定的方式 1,父级提供数据 2.绑定给子组件的自定义属性 3.子组件通过props的数组拿到自定义属性从而拿到数据 '''
<body>
<div id="app">
<input type="text" v-model="sup_data">
<!-- 2 -->
<global-tag :abcde="sup_msg" :sup_data="sup_data"></global-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 创建全局组件
Vue.component('global-tag', {
// 3
props: ['abcde', 'sup_data'],
template: "<div @click='fn'>{{ abcde }}</div>",
methods: {
fn: function () {
alert(this.sup_data)
}
}
});
// 将父组件的信息传递给子组件
// 采用属性绑定的方式: 1,父级提供数据 2.绑定给子组件的自定义属性 3.子组件通过props的数组拿到自定义属性从而拿到数据
new Vue({
el: "#app",
data: {
// 1
sup_msg: "父级的msg",
sup_data: ""
}
});
</script>
三、子组件传递信息给父组件
''' 采用发生事件的方式: 1.在子组件的内容系统事件中来定义一个自定义事件,采用$emit发生到自定义组件名上(可以携带子组件内容数据) 2.在父组件复用子组件时, 实现子组件自定义数据的功能, 在父组件中的methods中为功能绑定函数(函数的参数就是携带出来的数据) 3.当在组件内部激活系统事件,就会激活自定义事件,$emit发生给父级,激活父级绑定的函数,该函数被执行,同时拿到数据 '''
<body> <div id="app"> <!-- abc为子组件的自定义事件,该事件的含义要在子组件内容声明规定 --> <!-- 2 --> <global-tag @abc="action"></global-tag> <global-tag @abc="action"></global-tag> {{ sup_info }} </div> </body> <script src="js/vue.js"></script> <script> // 创建全局组件 Vue.component('global-tag', { template: "<div><input v-model='info'><p @click='sendMsg'>子组件</p></div>", data: function () { return { info: "", msg: "子组件的信息" } }, methods: { // 1 sendMsg: function () { // alert(123) // 激活自定义事件 abc this.$emit('abc', this.msg, this.info) }, } }); // 将子组件的信息传递给父组件 // 采用发生事件的方式: // 1.在子组件的内容系统事件中来定义一个自定义事件,采用$emit发生到自定义组件名上(可以携带子组件内容数据) // 2.在父组件复用子组件时, 实现子组件自定义数据的功能, 在父组件中的methods中为功能绑定函数(函数的参数就是携带出来的数据) // 3.当在组件内部激活系统事件,就会激活自定义事件,$emit发生给父级,激活父级绑定的函数,该函数被执行,同时拿到数据 new Vue({ el: "#app", data: { sup_info: "" }, methods: { // 3 action: function (msg, info) { alert(msg) this.sup_info = info } } }); </script>
四、vue项目开发
''' 一个.vue文件就是一个组件 一个个小组件(存放在conponents文件夹下)组成一个可以代表页面的大组件(存放在views文件夹下) 每一个组件(.vue文件)都由 <template><template> <script></script> <style></style> 要打开一个已有的项目并运行,不需要项目的node_modules文件夹,今日项目目录执行npm install会自动安装项目的依赖包 '''
<template> <!-- 模板区域: 只能有一个根标签 --> <div class="tagname"> <!-- n个复杂的子标签 --> <!-- 使用子组件,Vue模板语言下支撑大小写 --> <SubTag></SubTag> </div> </template> <script> import SubTag from './components/SubTag.vue' // 逻辑代码区域 // 该语法和script绑定出现 export default { // 表示本组件的名字,一般都省略 name: 'tagname', // 数据 data: function() { return { } }, // 注册子组件 components: { 'SubTag': SubTag }, methods: { // 书写该组件的方法 } } </script> <style scoped> /* 样式区域 */ /* scoped表示这里的样式只适用于本组件内部, 不添加scoped则代表全局样式(那么其他组件类名为tagname的也将被控制) */ /* 书写的就是原生的css代码 */ .tagname { background-color: orange } </style>