74660

Vue中组件

<h1 id="自我总结">0828自我总结

<h1 id="vue中组件">Vue中组件

<h2 id="一.组件的构成">一.组件的构成</h2>

组件:由 template + css + js 三部分组成(.vue文件)

<ul><li>

1)组件具有复用性

</li> <li>2) 复用组件时,数据要隔离</li> <li>

3) 复用组件时,方法不需要隔离,因为方法使用隔离数据就可以产生区别

</li> </ul>

组件介绍:

<ul><li>1) 每一个组件都有自己的template(虚拟DOM),最后要替换掉真实DOM(渲染)</li> <li>2) 挂载点el,在根组件没有规定template,用挂载的真实DOM拷贝出虚拟DOM,完成实例创建后再替换掉真实DOM(渲染)</li> <li>3) 挂载点el,在根组件规定template,就采用自己的template作为虚拟DOM,挂载点还是必须的,用于占位</li> <li>4) 所有 new Vue() 产生的组件都称之为根组件 - 项目开发时,整个项目只有一个根组件</li> <li>5) template只能解析一个根标签</li> </ul><h2 id="二.template的使用">二.template的使用</h2> <h3 id="用法一-把整个vue所关联的内容替换">用法一-把整个vue所关联的内容替换</h3> <div id="app"> {{ msg }} </div> <script src="vue.js"></script> <script> new Vue({ el: '#app', data: { msg: 'message' }, // template: '<div id="main">

{{ msg }}

{{ msg }}

</div>' template: ` <div id="main">

{{ msg }}

{{ msg }}

</div> `, }) </script>

最后显示的效果为

message message

其实他是先出现message

然后由于后面的template会生成一个临时的dom,会把前面el关联的整个标签变成template中的内容

<h3 id="用法二-局部组件">用法二-局部组件</h3> <div id="app"> <!--3)组件渲染--> <local-tag></local-tag> <local-tag></local-tag> <local-tag></local-tag> </div> <script src="js/vue.js"></script> <script> // 1)创建组件 let localTag = { template: '

66666

' }; new Vue({ el: '#app', // 2)注册组件 components: { // localTag: localTag, 函数名和组件名相同可以直接简写成一个名字 localTag } }) </script>

局部组件可以分三步

<ul><li>创建组件</li> <li>注册组件</li> <li>网页中渲染</li> </ul><h3 id="用法三-全局组件">用法三-全局组件</h3> <div id="main"> <global-tag></global-tag> </div> <script src="vue.js"></script> <script> // 全局组件 // 1)创建组件 // 2)渲染组件 // 3) 使用到全局组件的内容必须用Vue进行挂载,如果不挂载全局组件只是个普通的自定义标签 Vue.component('global-tag', { template: '

66666

' }); new Vue({ el: '#main', }); </script>

使用到全局组件的内容必须用Vue进行挂载,如果不挂载全局组件只是个普通的自定义标签

注意点

<ul><li>template中只能有一个根标签,如果有多个,只生效第一个</li> <li>template内容如果要多行显示方便观察的话用反引号`来代替双引号或者单引号</li> </ul><h2 id="三.组件复用的数据隔离">三.组件复用的数据隔离</h2> <h3 id="局部组件中">1.局部组件中</h3> <div id="app"> <!--3)组件渲染--> <local-tag></local-tag> <local-tag></local-tag> <local-tag></local-tag> </div> <script src="vue.js"></script> <script> // 1)创建组件 let localTag = { data:function(){ return { msg:100 } }, template: '

{{msg}}

' }; new Vue({ el: '#app', // 2)注册组件 data:{ msg:20 }, components: { // localTag: localTag, 函数名和组件名相同可以直接简写成一个名字 localTag } }) </script>
<ul><li>把data里面值放function中当然了function可以不用写省略掉</li> <li>而且不会受vue中msg影响,只受组件中的msg影响</li> </ul><h3 id="全局组件中">2,全局组件中</h3> <div id="main"> <global-tag></global-tag> </div> <script src="vue.js"></script> <script> // 全局组件 // 1)创建组件 // 2)渲染组件 // 3) 使用到全局组件的内容必须用Vue进行挂载,如果不挂载全局组件只是个普通的自定义标签 Vue.component('global-tag', { data:function(){ return { msg:100 } }, template: '

{{msg}}

' }); new Vue({ el: '#main', data:{ msg:10 } }); </script>

特点和局部相同

<h2 id="四.组件信息交互父传子">四.组件信息交互父传子</h2> <div id="app"> <local-tag :ad_dic="ad" v-for="ad in ads" :key="ad.img"></local-tag> </div> <script src="js/vue.js"></script> <script> let localTag = { props: ['ad_dic'], template: ` <div class="ad"> <img :src="ad_dic.img" alt=""> <h4>{{ ad_dic.title }}</h4> </div> `, }; // 模拟后台的数据 let ads = [ { 'img': 'img/001.png', 'title': '小猫' }, { 'img': 'img/002.png', 'title': '黄蛋' }, { 'img': 'img/003.png', 'title': '蓝蛋' }, { 'img': 'img/004.png', 'title': '短腿' }, ]; new Vue({ el: '#app', data: { ads, // 后期项目是后台返回的数据 }, components: { localTag } }) // 分析数据 父传子 // 1)父组件提供数据 // 2)在父组件模板中,为子组件标签设置自定义属性绑定父级数据 // 3)在子组件props成员中,接收自定义属性 // 4)在子组件模板和方法中,使用自定义属性名就可以访问父级数据 </script> <h2 id="五.组件信息交互子传父">五.组件信息交互子传父</h2> <div id="app">

<input type="text" v-model="info"> <button @click="add_msg">留言</button> <ul> <msg-tag @del_action="del_li" :msg="msg" :index="i" v-for="(msg, i) in msgs" :key="msg"></msg-tag> </ul>

</div> <script src="js/vue.js"></script> <script> let msgTag = { props: ['msg', 'index'], template: ` <li> <span @click="del_fn" class="del">x</span> <span>{{ msg }}</span> </li> `, methods: { del_fn() { this.$emit('del_action', this.index) } } }; new Vue({ el: '#app', components: { msgTag }, data: { info: '', msgs: JSON.parse(sessionStorage.msgs || '[]'), }, methods: { add_msg() { let info = this.info; if (info) { this.msgs.unshift(this.info); this.info = ''; sessionStorage.msgs = JSON.stringify(this.msgs); } }, del_li(index) { console.log(index); this.msgs.splice(index, 1); sessionStorage.msgs = JSON.stringify(this.msgs); } } }); // 分析数据 子传父 // 1)子组件提供数据 // 2)子组件通过系统事件激活自己的绑定方法,发送一个自定义事件,携带自身数据 // 3)在父组件模板中的子组件标签中为自定义事件绑定父组件方法 // 4)父组件实现方法获取到子组件数据 </script>

来源:博客园

作者:小小咸鱼YwY

链接:https://www.cnblogs.com/pythonywy/p/11426513.html

Recommend