Vue_01_组件的使用

最新推荐文章于 2024-09-12 18:02:32 发布

LycLhsYYY

最新推荐文章于 2024-09-12 18:02:32 发布

阅读量171

点赞数

分类专栏： Vue学习文章标签： vue html js javascript

本文链接：https://blog.csdn.net/LycLhsYYY/article/details/106657757

版权

Vue学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

全局组件和局部组件

简单来说，全局组件可以在整个页面中使用，在JS模板语法中，还可以导出到其它文件中使用。局部组件只能在挂载的Vue实例中使用

全局组件

定义方法：

Vue.component('name',{
	template:'<h1>welcome</h1>',
	data:()=>{
		return {}
	},
	methods:{},
	porps:[]
})

局部组件

定义方法：

new Vue({
	components:{
		name:{
			tempalte:'<h1>welcome</h1>',
			data:()=>{
				return {}
			},
			methods:{},
			props:[]
		}
	}
})

注册组件的2种方式

注意，组件必须使用单个根元素，否则Vue会提示错误

Error compiling template:

Component template should contain exactly one root element

对象文本注册

// 这种注册方法没有代码提示
 Vue.component('name',{
	tempalte:'<h1>welcome</h1>'
})

模板注册

<body>
	// 注意，组件内容必须
	<tempalte id="temp">
		<div>
			<h1>welcome</h1>
			<p>welcome</p>
		</div>
	</tempalte>
</body>
<script>
	Vue.component('name',{
		template:'#temp'
	})
</script>

组件是使用

使用组件名称引用

<body>
  <name></name>
</body>
<script>
  Vue.component('name', {
    template: '<h1>welcome</h1>'
  })
</script>

标签引用

使用component标签，绑定is属性，可以动态切换组件

<body>
  <div class="app">
    <component :is="comName"></component>
    <input type="button" value="switch" @click="myclick">
  </div>
</body>
<script src="vue.js"></script>
<script>
  Vue.component('first', {
    template: '<h1>first component</h1>'
  })
  Vue.component('second', {
    template: '<h1>second component</h1>'
  })
  new Vue({
    el: '.app',
    data: {
      comName: 'first'
    },
    methods: {
      myclick() {
        if (this.comName === 'first') {
          this.comName = 'second'
        } else {
          this.comName = 'first'
        }
      }
    }
  })
</script>

父子组件的传值

此处的父组件，指的是Vue实例，Vue实例某种意义上可以看作是一个组件。子组件指的是在Vue实例中引用的组件，不管是全局组件还是局部组件

参数之间的传递

使用v-bind动态传递父组件的值给子组件

<body>
  <div class="app">
    <soncom :ptitle="title"></soncom>
  </div>
</body>
<script src="vue.js"></script>
<script>
  var that = null;
  Vue.component('soncom', {
    template: '<h1>{{ptitle}}</h1>',
    props: ['ptitle']
  })
  new Vue({
    el: '.app',
    data: {
      title: '我是父组件的值'
    }
  })
</script>

利用事件机制，配合方法实现父子组件传值

<body>
  <div class="app">
    <soncom :ptitle="title" @func="myClick"></soncom>
  </div>
</body>
<script src="vue.js"></script>
<script>
  var that = null;
  Vue.component('soncom', {
    template: '<h1 @click="sonClick">{{ptitle}}</h1>',
    props: ['ptitle'],
    data: () => {
      return {
        sonTitle: '我是子组件的值'
      }
    },
    methods: {
      sonClick() {
        this.$emit('func', this.sonTitle)
      }
    }
  })
  new Vue({
    el: '.app',
    data: {
      title: '我是父组件的值',
      receiveTitle: ''
    },
    methods: {
      myClick(data) {
        this.receiveTitle = data
      }
    }
  })
</script>