目录
组件
概念:
组件分类
组件的特点
根组件
子组件
组件传参
组件
概念:
html,CSS 于 JS 的集合体, 为该集合体命名, 用该名字复用 HTML,CSS 于 JS 组成的集合体 =》复用性
组件分类
根组件:
new vue({}) <--! 生成的组件 -->
局部组件:
组件名 = {},{}内部采用的是 vue 语法
全局组件: Vue.component('组件名',{}),{}内部采用的是 vue 语法
组件的特点
组件都有管理组件 HTML 页面结果的 template, 实列成员, template 中有且只有一个根标签
根组件都是作为最顶层父组件, 局部于全局组件作为子组件, 也可以成为其他局部于全局组件的父组件
子组件的数据需要隔离(数据化组件, 每一个组件拥有自己数据的独立名称空间)
局部组件必须注册后才能使用, 全局组件不需要注册, 提倡使用局部组件
组件中出现的所有变量 (模板中, 逻辑中) 由该组件自己提供管理
局部全局和根组件都是一个 vue 实列, 一个实列对应一套 HTML,CSS,JS 结构, 所以实列就是组件
根组件
根组件可以不明确 template,template 默认采用挂载点页面结构; 如果设置了 template, 挂载点内部的内容无效, 因为回被替换
注意: HTML,body 标签不能被替换, 所以不能作为挂载点
子组件
声明局部组件: 局部组件要在其父组件中注册才能使用
1, 声明组件 2, 注册组件 3, 渲染组件 => 全局组件不需要注册
- let localTag = {
- template: `
- <div class="box" @click="fn">
- <img src="img/001.jpg" alt="">
- <h2 > 美女</h2>
- </div>
- `,
- methods: {
- fn() {
- console.log(this)
- }
- }
- };
- Vue.component('global-tag', {
- template: `
- <div class="box" @click="fn">
- <img src="img/002.jpg" alt="">
- <h2 > 大长腿</h2>
- </div>
- `,
- methods: {
- fn() {
- console.log(this)
- }
- }
- });
- new Vue({
- el: '#app',
- data: {},
- components: { // 注册组件
- localTag,
- }
- })
组件传参
- <--! 父传子 -->
- <body>
- <div id="app">
- <div class="wrap">
- <local-tag v-for="dog in dogs" :dog="dog" def="12345" :xyz="dog.name"></local-tag>
- </div>
- </div>
- </body>
- <script>
- let localTag = {
- props: ['dog', 'def', 'xyz'],
- template: `
- <div class="box" @click="fn">
- <img :src="dog.img" alt="">
- <h2 > 捶 {{ dog.name }}{{ count}} 下</h2>
- <!--<h3>{{ abc }}</h3>-->
- <!--<h3>{{ def }}</h3>-->
- <!--<h3>{{ xyz }}</h3>-->
- </div>
- `,
- data() {
- return {
- count: 0,
- }
- },
- methods: {
- fn() {
- console.log(this.dog);
- this.count++;
- }
- }
- };
- new Vue({
- el: '#app',
- data: {
- dogs,
- },
- components: {
- localTag,
- }
- });
- </script>
- <--! 子传父 -->
- <body>
- <div id="app">
- <h1>{{ h1 }}</h1>
- <h3>{{ h3 }}</h3>
- <!-- 自定义组件标签的事件自定义事件是属于子组件的, 子组件在父组件中渲染并绑定事件方法,
- 所以事件方法由父组件来实现
- 子组件如何触发自定义事件: this.$emit('自定义事件名', 触发事件回调的参数们)
- 子组件触发自定义事件, 携带出子组件的内容, 在父组件中实现自定义事件的方法, 拿到子组件传递给父 组件的消息
- -->
- <tag @action="actionFn"></tag>
- </div>
- </body>
- <script>
- let tag = {
- template: `
- <div>
- <input type="text" v-model="t1">
- <input type="text" v-model="t2">
- <button @click="changeTitle">修改标题</button>
- </div>
- `,
- data() {
- return {
- t1: '',
- t2: '',
- }
- },
- methods: {
- changeTitle() {
- if (this.t1 && this.t2) {
- // console.log(this.t1, this.t2);
- this.$emit('action', this.t1, this.t2);
- this.t1 = '';
- this.t2 = '';
- }
- }
- }
- };
- new Vue({
- el: '#app',
- data: {
- h1: '主标题',
- h3: '子标题'
- },
- components: {
- tag,
- },
- methods: {
- actionFn(a, b, c) {
- // console.log('触发了', a, b, c);
- this.h1 = a;
- this.h3 = b;
- },
- })
- </script>
vue 组件
来源: http://www.bubuko.com/infodetail-3338404.html