组件
''' 1.根组件:new Vue()创建的组件,一般不明确自身的模版,模版就采用挂载点 2.局部组件:local-component={} 3.全局组件:Vue.component({}) ''' ''' 1.一个组件就是一个vue实例 2.组件具有自身的template 3.组件的模版只能有一个根标签 4.子组件的data具有作用域,以达到组件的复用,每个组件的数据独有 '''
变量声明的关键字
''' 没有关键字:全局作用域 var:没有块级,有局部作用域 let:有块级,有局部作用域 const:有块级,有局部作用域,是常量 '''
局部组件
第三步 <div id="app"> <!--html代码不区分大小写,该名字使用子组件是不合法的命名--> <!--<localTag></localTag>--> <!--<local></local>--> <!--组件的复用--> <local-tag></local-tag> <local-tag></local-tag> </div> <script> 第一步 var localTag = { template: '<div class="local" style="color: orange" @click="btnAction">{{ name }}组件</div>', // 子组件的数据与方法由子组件自身提供 data: function () { return { name: '局部' } }, methods: { btnAction: function () { alert('你丫点我了') } } }; 第二步 new Vue({ el: "#app", components: { // local: localTag // 'local-tag':localTag // localTag: localTag, // 1.js的驼峰命名(localTag)对应的是html的连接命名(local-tag) // 2.key与value的变量名一致,可以简写 localTag } }); </script>
全局组件
<div id="app"> <global-tag></global-tag> <global-tag></global-tag> </div> <script> Vue.component('global-tag', { template: '<div @click="btnClick">{{ name }}组件被点了{{ n }}下</div>', // 组件被复用一次,就会产生一个新的局部作用域,使用一套数据 data: function(){ return { n: 0, name: "全局" } }, methods: { btnClick: function () { this.n += 1 } } }); new Vue({ el: "#app" }) </script>
父组件传递数据给子组件
通过绑定属性的方式进行数据传递
<div id="app"> <global-tag :sup_data1='sup_data1' :supData2='sup_data2'></global-tag> </div> <script type="text/javascript"> Vue.component('global-tag', { props:['sup_data1', 'supdata2'], template: '<div>{{ sup_data1 }} {{ supdata2 }}</div>' }) new Vue({ el: '#app', data: { sup_data1: '数据1', sup_data2: '数据2' } }) </script>
子组件传递数据给父组件
通过发送事件请求的方式进行数据传递
<div id="app"> <global-tag @send_action='receiveAction'></global-tag> </div> <script type="text/javascript"> Vue.component('global-tag', { data () { return { sub_data1: "数据1", sub_data2: '数据2' } }, template: '<div @click="clickAction">发生</div>', methods: { clickAction () { this.$emit('send_action', this.sub_data1, this.sub_data2) } } }) new Vue({ el: '#app', methods: { receiveAction (v1, v2) { console.log(v1, v2) } } }) </script>
父子组件实现todoList
<div id="app"> <div> <input type="text" v-model="val"> <button type="button" @click="submitMsg">提交</button> </div> <ul> <!-- <li v-for="(v, i) in list" :key="i" @click="removeMsg(i)">{{ v }}</li> --> <todo-list v-for="(v, i) in list" :key="i" :v="v" :i="i" @delect_action="delect_action"></todo-list> </ul> </div> <script type="text/javascript"> Vue.component("todo-list", { template: "<li @click='delect_action'><span>第{{ i + 1 }}条: </span><span>{{ v }}</span></li>", props: ['v', 'i'], methods: { delect_action () { this.$emit("delect_action", this.i) } } }) new Vue({ el: "#app", data: { val: "", list: [] }, methods: { submitMsg () { // 往list中添加input框中的value if (this.val) { this.list.push(this.val); this.val = "" } }, delect_action(index) { this.list.splice(index, 1) } } }) </script>