vue2组件化开发

1.思想 1.一个应用的所有逻辑放在一个页面会非常复杂,不利于拓展
2.一个应用分为一个个页面,每一个页面又分成多个独立的组件
3.每个组件都有独立的功能

2.使用组件的场景:可以独立出来的应用才可以使用组件化开发

3.组件分类 : 1.页面级别的组件 2. 可复用的组件 3.与业务无关的组件

4.使用

Vue.component('todo-item', {
  props:['title'],
  template: '<div><button>xxxxx</button><li> {{title}} </li><button>xxxxx</button><li> {{title}} </li><button>xxxxx</button><li> {{title}} </li><button>xxxxx</button><li> {{title}} </li></div>'
})

var app7 = new Vue({
  el: '#app',
  data: {
   	aabx:'zxxx'
  }
})

5.局部定义

html:
<test></test>

var app7 = new Vue({
  el: '#app',
  data: {
   	aabx:'zxxx'
  },
  components:{
  	test:{
  		template:"<h2>xxxxxxx</h2>"
  	}

  }
})

6.单文件组件


```html
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g @vue/cli
cnpm install -g webpack

vue ui
之后使用它的文件名和使用都要一一对应
7.组件标签化
1.script

 <script type="text/template" id="lk_count">
     <button value="1111">xxxx</button>

</script> 

 var app7 = new Vue({
  el: '#app',
  data: {
   	aabx:'zxxx'
  },
  components:{
  	test:{
  		template:"#lk_count"
  	}

  }
})

2.使用

8.vue3为什么要data要返回一个对象 :为了防止对象被改变 数据改变

9.(vue3有区别 可以this.$emit("boxClick",obj); 传值 vue2不行)子组件传递数据给父组件this.$emit()

 <todo-item title="tttt1" age="aaa" @boxClick"mytest"></todo-item>

<!-- @boxClick是监听子组件的这个emit事件 -->

(vue3没有了)

Vue.component('todo-item', {
  template: '<div @click="boxClick">{{title}}</div>',
  methods:{
  	myfunc(){
                                const obj={
                                      name:"aaa",
                                      age="aaa"

                                  }
  		this.$emit("boxClick",obj);
  	}
  	
  }
})

10.父子组件访问子组件:$ref 1.html加属性<p ref="box1"></p>
子组件访问父: