Vue之组件使用(二)

最新推荐文章于 2024-07-14 12:56:18 发布

dengjingzhi3900

最新推荐文章于 2024-07-14 12:56:18 发布

阅读量60

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yinxuejunfeng/p/9226256.html

版权

补充一下：之前没提到，这里是一个父子组件通信的方法

如果想要使同一个组件实现不同的效果，那么可以这样做。

把需要封装的组件模板写在template中

<template id="counter-template">
    <h1>{{heading}}</h1>
  <button @click="count+1">Submit{{count}}</button>
</template>

其中在建立组件时，用到了一个props属性，可以读取到引用组件里的自定义属性值，并且随着用户的操作进行动态的改变

我觉得这个属性特别的好，还是很好用的，所以在这里记录一下；

能够实现父子组件间的通信，后面还会更新其他一些内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>component</title>
  <script src="Vue.min.js"></script>

</head>
<body>
    <div id="app">
      <counter heading="Likes"></counter>
      <counter heading="DisLikes"></counter>
    </div>
    <template id="counter-template">
        <h1>{{heading}}</h1>
      <button @click="count+1">Submit{{count}}</button>
    </template>
    <script>
       Vue.component('counter',{
         template:'#counter-template',
         props:['heading'],
         data:function(){
           return { count:0};
         }

       });
    </script>

</body>
</html>

转载于:https://www.cnblogs.com/yinxuejunfeng/p/9226256.html

dengjingzhi3900

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue之组件使用(二)

补充一下：之前没提到，这里是一个父子组件通信的方法如果想要使同一个组件实现不同的效果，那么可以这样做。把需要封装的组件模板写在template中<template id="counter-template"> <h1>{{heading}}</h1> <button @click="count+1">Subm...
复制链接

扫一扫