IMWeb训练营-VUE-CustomSelectComponent

最新推荐文章于 2024-01-04 01:30:17 发布

NC1995

最新推荐文章于 2024-01-04 01:30:17 发布

阅读量387

点赞数

分类专栏： VueJS

本文链接：https://blog.csdn.net/NC1995/article/details/70370380

版权

VueJS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

VueJS 自定义组件

注册组件

全局注册
可用于在任何模板中，使用之前要先注册
语法：Vue.component(name, options)
局部注册

组件间通信

父组件 -> 子组件： props
子组件 -> 父组件： $on &$ emit

组件中的 data 必须是函数

每个组件都是相互独立的，如果他们公用一个对象，在更改一个组件数据的时候，会影响其他组件。
如果是函数的话，每个组件都有自己独立的数据，相互之间不会影响。

is 扩展原生 html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <link href="css/style.css" rel="stylesheet">
  </head>
  <body>
    <div id="app">
      <h2>自定义组件：下拉框{{msg}}</h2>
      <!--自定义组件标签-->
      <custom-select></custom-select>
    </div>
  </body>
  <script src="https://cdn.bootcss.com/vue/2.2.6/vue.js"></script>
  <script>
    // 全局注册组件
    Vue.component("custom-select",{
      template: `<section class="wrap">
                  <div class="searchIpt clearfix">
                    <div class="clearfix">
                      <input type="text" name="keyWord" value="" />
                      <input type="button" value="GO">
                    </div>
                    <ul class="list">
                      <li>html</li>
                      <li>angular</li>
                      <li>react</li>
                      <li>node</li>
                      <li>js</li>
                      <li>css</li>
                    </ul>
                  </div>
                </section>`
    })

    // 实例化 vm
    new Vue({
      el: "#app",
      data: {
        msg: "dhfajk"
      },
      methods: {

      }
    })
  </script>
</html>