Vue组件与组件间通信

最新推荐文章于 2023-06-29 21:54:24 发布

chengyu_wang

最新推荐文章于 2023-06-29 21:54:24 发布

阅读量442

点赞数 2

分类专栏： vuejs学习笔记文章标签： vue vuejs vue-js 组件 component

本文链接：https://blog.csdn.net/qq_17347575/article/details/78925718

版权

组件的用法

注册之后才能使用，注册分局部注册和全局注册

组件和Vue实例类似，基本可以使用其所有内容（data,computed,methods,filters,watch)

与Vue实例不同，data是函数，输入需要return

全局注册

<!DOCTYPE html>
<html>

<head>
  <title>show</title>
  <meta charset="utf-8">
</head>

<body>
  <div id="app">
    <my-component></my-component>
  </div>
  <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
  <script>
  Vue.component('component', {
    template: `<div>Hello World</div>`
  })

  new Vue({
    el: '#app'
  })
  </script>
</body>

</html>

局部注册

<!DOCTYPE html>
<html>

<head>
  <title>show</title>
  <meta charset="utf-8">
</head>

<body>
  <div id="app">
    <my-component></my-component>
  </div>
  <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
  <script>
  var component = {
    template: `<div>Hello World</div>`
  }

  new Vue({
    el: '#app',
    components: {
      'my-component' : component
    }
  })
  </script>
</body>

</html><

最低0.47元/天解锁文章

chengyu_wang

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue组件与组件间通信

组件的用法注册之后才能使用，注册分局部注册和全局注册组件和Vue实例类似，基本可以使用其所有内容（data,computed,methods,filters,watch)与Vue实例不同，data是函数，输入需要return全局注册<!DOCTYPE html><html><head> <title>show</title> <meta charset="utf-8"></head><b
复制链接

扫一扫