目 录CONTENT

文章目录

vue中组件

在水一方
2022-01-12 / 0 评论 / 0 点赞 / 449 阅读 / 2,184 字 / 正在检测是否收录...

前言

vue的开发是以组件的形式来进行开发的,使用时对于vue的组件化思想是需要熟练掌握,那么vue中组件是如何进行封装的呢?,封装之后如何进行复用等问题需要进行学习

不清楚代码指令可参照vue的api:地址:https://cn.vuejs.org/v2/api/

demo:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="vue.js"></script>
</head>
<body>
	<div id="app" >
		<span>{{ a }}</span>
		<span>{{ b }}</span>

      <!-- <a v-bind:href="url">百度一下</a> -->

<!--        <input type="button" value="按钮" v-on:click="a+=1"/>
 -->       <button v-on:click="happy">ceshi</button>
           <button v-on:click="goto">嗨起来</button>
           <my-component></my-component>
           <my-cpn></my-cpn>
	</div>

  <template id='ceshi'>
    <div>
      
      <h3>模板抽离</h3>
    </div>

  </template>
	


</body>
<script type="text/javascript">
	// var obj={a:1234};
  // 
  // const cpn = Vue.extend({
  //   template: '<div><h2>测试构建一个组件</h2></div>'
  // })

  Vue.component('my-cpn',{
    template: '#ceshi',
    data() {
      return {
        title:"1232323"
      }
    }
  })

 Vue.component('my-component', { 
 	data: function(){
 		return {
 			count: 0
 		}
 	},
 	template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'

 })



 var vm = new Vue({
  el: '#app',
  data:{
  	a: "11",
  	b: "22"
  },

  methods:{
  	happy:function(){
  		alert("1232323123");
  	},
  	goto:function(){
  		alert("嗨起来");
  	}

  },

  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
});
 // vm.$watch('a',function(newVal,oldVal){
 //     console.log(newVal,oldVal);
 // })
 // vm.$data.a="12323232323";
 // // vm.b="b是否显示";


</script>

</html>


通过语法糖的方式进行全局注册

Vue.component('my-npc',{
   template: '<div><h2>测试内容</h2></div>'

})


模板的抽离

1 通过template标签

  <template id='ceshi'>
    <div>
      <h3>模板抽离</h3>
    </div>
  </template>

Vue.component('my-npc',{
   template: '#ceshi'
})

组件是一个单独的功能模块的的封装,这个模块有自己的Html模板,也应该有属于自己的数据data

组件中的data必须是函数data()而且这个函数需要返回一个实例

Vue.component('my-cpn',{
    template: '#ceshi',
    data() {
      return {
        title:"1232323"
      }
    }
  })

为什么组件中的data必须是一个函数呢?

用data()每次调用的时候都返回一个新的对象,多次调用就不会相互影响,如果相互影响的话,一个地方修改属性值所有调用的地方都会跟着变,就不能实现复用

0

评论区