精华内容
下载资源
问答
  • Vue's functional components are small and flexible enough to be declared inside of .vue file next to the main component. This allows you to mix jsx and Vue's templates so you have complete control ove...

    Vue's functional components are small and flexible enough to be declared inside of .vue file next to the main component. This allows you to mix jsx and Vue's templates so you have complete control over how to render your content.

     

    Robot.vue:

    <script>
    export default {
        functional: true,
        render: (h, {props, data}) => {
            return props.names.map(
                name => `https://robohash.org/${name}?set=set${props.num}`
            ).map(
                url => <div><img src={url} alt="" /></div>
            );
        }
    }
    </script>

     

    Using:

    <template>
           <section slot="content" class="flex flex-row flex-no-wrap">
              <Robot :names="names" :num="2"></Robot>
            </section>
    </template>
    
    <script>
    @Component({
      components: {
        Layout,
        Settings,
        Robot
      }
    })
    export default class HelloWorld extends Vue {
      @Prop({
        default: ["mindy", "john", "kim", "joel", "ben"]
      }) names
    }
    </script>

     

    展开全文
  • 需要在组件中把functional...Vue.component('testcomponent', { functional: true, // 为了弥补缺少的实例 // 提供第二个参数作为上下文 render: function (createElement, context) { // ... }, // P...

    需要在组件中把functional 设置为true

    一个函数化组件像这样:

    Vue.component('testcomponent', {
     functional: true,
     // 为了弥补缺少的实例
     // 提供第二个参数作为上下文
     render: function (createElement, context) {
      // ...
     },
     // Props 可选
     props: {
      level:{type:Number,default:1}
     }
    })
    

    组件需要的一切都是通过上下文传递,函数化组件只是一个函数,所以渲染开销也低很多

    • props: 提供props 的对象
    • children: VNode 子节点的数组
    • slots: slots 对象
    • data: 传递给组件的 data 对象
    • parent: 对父组件的引用

    this.$slots.default 更新为 context.children,之后this.level 更新为 context.props.level。 

    二、slots()和children对比

    slots().default children 类似

    不同之处在于:

    <createElement>
        <template #head>aaaaa</template>
        <p>bbbb</p>
        <template #footer>ccccc</template>
    </createElement>
    

      

    children 会给你三个段落标签,而 slots().default 只会传递第二个匿名段落标签,slots().head会传递第一个具名为head段落标签。

     

    转载于:https://www.cnblogs.com/liumingwang/p/11127819.html

    展开全文
  • vue的函数式组件functional主要有以下特点: 无状态(没有相应式数据) 无实例(没有this上下文,无法像传统组件一样通过this获取属性) 没有任何生命周期 轻量,渲染性能高,适合只依赖于外部数据传递而变化的组件...

    vue的函数式组件没怎么使用,所以可能不是很了解,所以,就花点时间大致了解下,算是对此有大概印象,其实它就是个函数而已,感觉与react的无状态组件有点像,特此做记录下。

    首先vue的函数式组件functional主要有以下特点:

    • 无状态(没有相应式数据)
    • 无实例(没有this上下文,无法像传统组件一样通过this获取属性)
    • 没有任何生命周期
    • 轻量,渲染性能高,渲染开销底,适合只依赖于外部数据传递而变化的组件(展示组件,无逻辑和状态修改)
    • 在template标签里标明functional
    • 只接受props值
    • 不需要script标签

    下面是关于此的简单demo,感觉动手操作下,会理解比较深。
    在这里插入图片描述
    Test.vue,

    <script>
    var vueCompt = {
      //传递home的data值到组件vueCompt内部
      props: ["data"],
      //渲染函数
      render: function (createElement) {
        return createElement("div", [
          createElement("div", "这个是vue图片"),
          createElement("img", {
            attrs: {
              src: this.data.url,
              height: 200,
              width: 200,
            },
          }),
        ]);
      },
    };
    
    var reactCompt = {
      props: ["data"],
      render: function (createElement) {
        return createElement("div", [
          createElement("div", "react用于构建用户界面的 JavaScript 库"),
          createElement("img", {
            attrs: {
              src: this.data.url,
              height: 200,
              width: 200,
            },
          }),
          createElement("div", this.data.text),
        ]);
      },
    };
    
    export default {
      /*
      添加 functional: true 之后就是函数式组件functional
      */
      functional: true,
      props: {
        data: {
          type: Object,
          required: true,
        },
      },
      /**
       * 函数式组件没有创建组件实例,所有传统的通过this来调用的属性,在这里都需要通过context来调用
       */
      render: function (createElement, context) {
        function getComponent() {
          var data = context.props.data;
          //判断是哪一种类型的组件
          switch (data.type) {
            case "vue":
              return vueCompt;
            case "react":
              return reactCompt;
            default:
              console.log("data 类型不合法:" + data.type);
          }
        }
        return createElement(
          getComponent(),
          {
            props: {
              data: context.props.data,
            },
          },
          context.children
        );
      },
    };
    </script>
    
    

    Home.vue

    <template>
      <div class="home">
        <h2>vue的functional小栗子</h2>
        <test :data="data"></test>
        <button @click="change('react')">react文字</button>
        <button @click="change('vue')">vue图</button>
      </div>
    </template>
    
    <script>
    import Test from "@/views/Test.vue";
    export default {
      name: "Home",
      data() {
        return {
          data: {},
        };
      },
      components: {
        Test,
      },
      methods: {
        change: function (type) {
          switch (type) {
            case "vue":
              this.data = {
                type: "vue",
                url: "https://cn.vuejs.org/images/logo.png",
                list: [],
              };
              break;
            case "react":
              this.data = {
                type: "react",
                url:
                  "https://cdn.jsdelivr.net/gh/reactnativecn/react-native-website@gh-pages/img/header_logo.svg",
                text:
                  "React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图,当数据改变时 React 能有效地更新并正确地渲染组件",
              };
              break;
          }
        },
      },
      created: function () {
        this.change("react");
      },
    };
    </script>
    
    

    vue的函数式组件functional参考:

    官方functional参考

    Vue 函数式组件原理和使用详解

    Vue 函数式组件 functional

    说说 Vue.js 中的 functional 函数化组件

    推荐在线MP4转gif工具

    展开全文
  • Functional templates allow you to create components consisting of only thetemplatetag and exposing thepropspassed into the template with thepropsobject off of the template context. This approach...

    Functional templates allow you to create components consisting of only the template tag and exposing the props passed into the template with the props object off of the template context. This approach allows you to build simple configurable templates without having to write any backing code.

     

    From the code in previous post:

    <template>
      <Settings >
        <Layout slot-scope="props">
            <header slot='header' class='p-2 bg-blue text-white'>{{props.header}}</header>
            <div slot="content" class="flex-grow p-3">Amazing content</div>
             <h2 slot="footer" class="bg-grey-light text-blue p-2 text-center">{{props.footer}}</h2>
        </Layout>
      </Settings>
    </template>
    
    <script>
    
    import {Component, Prop, Vue} from 'vue-property-decorator'
    import Layout from './Layout';
    import Settings from './Settings';
    
    @Component({
      components: {
        Layout,
        Settings
      }
    })

     

    We create two functional template component 'Header' and 'Footer':

    <!-- components/Heade.vuer -->
    
    <template functional>
          <header slot='header' class='p-2 bg-blue text-white'>{{props.header}}</header>
    </template>
    <!-- components/Footer.vue -->
    
    <template functional>
        <h2 slot="footer" class="bg-grey-light text-blue p-2 text-center">{{props.footer}}</h2>
    </template>

     

    Functional template works pretty much like React functional component:

    const header = props => <header>{{props.header}}</header>

    Just in Vue, you just need to add 'functional' directive to the <template>, don't need to add any js code.

     

    exports those componets in components/index.js file:

    export { default as Header } from "./Header"
    export { default as Footer } from "./Footer"

     

    Using those component to refactor the code:

    <template>
      <Settings >
        <Layout slot-scope="{header, footer}">
            <Header :header="header"></Header>
            <div slot="content" class="flex-grow p-3">Amazing content</div>
            <Footer :footer="footer"></Footer> 
        </Layout>
      </Settings>
    </template>
    
    <script>
    
    import {Component, Prop, Vue} from 'vue-property-decorator'
    import Layout from './Layout';
    import Settings from './Settings';
    
    import {Header, Footer} from './components';
    
    
    @Component({
      components: {
        Layout,
        Settings,
        Header,
        Footer
      }
    })

     

    转载于:https://www.cnblogs.com/Answer1215/p/9362569.html

    展开全文
  • This particular component is written in functional style, with hooks, and whatever I try, I end up with a <code>Invalid hook call. Hooks can only be called inside of the body of a function component....
  • vue中的functional函数式组件

    千次阅读 2019-12-25 22:48:06
    vue中的函数式组件也称为无状态组件,与Flutter中的无状态组件类似,其内部没有任何状态。函数式组件中只接受一个props参数,没有其他参数。 <!-- 声明为一个函数式组件 --> <template functional> {{...
  • functional为true,表示该组件为一个函数式组件 函数式组件:没有data状态,没有响应式数据,只会接受props属性,没有this,他就是一个函数
  • <div><p><strong>Current ...<p>I would like template functional is parse by vue-docgen-api <p>Thank you very much by advance</p><p>该提问来源于开源项目:vue-styleguidist/vue-styleguidist</p></div>
  • 若一个组件只用于展示数据,所有动态数据都从父组件传递进来(只有props),内部没有逻辑交互(无methods方法、也没有mounted等任何生命周期处理函数),没有状态修改(无data),则推荐使用函数式组件来提升vue的性能...
  • 主要介绍了说说Vue.js中的functional函数化组件的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 说说 Vue.js 中的 functional 函数化组件

    千次阅读 2019-02-07 14:32:34
    Vue.js 组件提供了一个 functional 开关,设置为 true 后,就可以让组件变为无状态、无实例的函数化组件。因为只是函数,所以渲染的开销相对来说,较小。 函数化的组件中的 Render 函数,提供了第二个参数 context ...
  • 组件写的多了,可以把通用的组件单独抽离成一个组件库,供别的项目或者其他人使用。 文章链接:...一个比较实用的功能按钮库:https://github.com/justforuse/functional-button 演示...
  • <p>It should be possible to convert the styled components to functional vue components and do the nessessary stylesheet calculations and injections in <code>render</code> with a bit of closed over ...
  • vue create v <pre><code> Vue CLI v3.0.4 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, TS, PWA, CSS Pre-processors, Linter, Unit, E2E ? Use ...
  • VUE3 中使用 VUEX,报错【[Vue warn]: inject() can only be used inside setup() or functional components.】 参考链接1:参考链接 vuex 报错 injuce() 参考链接2:vuex 报错 无法在methods中使用store的引入 ...
  • <script src="https://cdn.staticfile.org/vue/2.3.2/vue.js"> Vue.component('aaa', { functional: true, render: function (h, ctx) { return h('div',['aaa']) }, }) Vue.component('bbb', { functional: ...
  • <p>vue单文件里写函数式组件,添加了functional: true选项后 style标签的scoped就无效了</p><p>该提问来源于开源项目:vuejs/vue-loader</p></div>
  • 原文地址:Simple and performant functional Vue.js components 原文作者:Alex Jover 译者:程序猿何大叔 特别声明:本文是作者 Alex Jover 发布在 VueDose 上的一个系列。 版权归作者所有。 译者在翻译前...

空空如也

空空如也

1 2 3 4 5 ... 19
收藏数 365
精华内容 146
关键字:

functionalvue

vue 订阅