使用prop向子组件传递数据:

news/2024/7/9 23:35:24 标签: vue

组件内部如何传递数据,
无所谓哪个是父组件,哪个是子组件?一说,就是组件内部传数据

<div id="app">
  <post-item post-title="Java 无难事">
  </post-item>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
  const app = Vue.createApp({});
  app.component('PostItem', {
    props: ['postTitle'],
    template: `
    <h3>{{ postTitle }}</h3>
    `
  });
  app.mount('#app');
</script>

现在就是想给post-item组件赋予Java无难事的标题。

为啥这个运行出来的是,正常吗

<div id="app">
  <post-list></post-list>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
  const app = Vue.createApp({});
  const PostItem = {
    props: ['postTitle'],
    template: `<h3> {{ postTitle }}</h3>`
  };
  
  app.component('PostList', {
    components: {
      PostItem
    },
    template: `<div><PostItem postTitle="Java 无难事“ /></div>`
  });
  app.mount('#app')
</script>

标点符号太重要了

<div id="app">
  <post-list></post-list>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
  const app = Vue.createApp({});
  const PostItem = {
    props: ['postTitle'],
    template: `<h3> {{ postTitle }}</h3>`
  };
  
  app.component('PostList', {
    components: {
      PostItem
    },
    template: `<div><PostItem postTitle="Java 无难事" /></div>`
  });
  app.mount('#app')
</script>

http://www.niftyadmin.cn/n/957498.html

相关文章

tensorboard 生成的网址不能正常打开访问

最近学习 TensorFlow 中可视化助手 Tensorboard&#xff0c;但是一切设置好后&#xff0c;网址总是打不开&#xff0c;显示拒绝此连接。 本篇文章将帮助解决这个问题。 首先&#xff0c;应该确保自己的电脑名称为英文&#xff0c;不能出现中文&#xff0c;否则生成的日志文件…

redis cluster的批处理中ask重定向解决方案

分别使用mget和pipline做批处理 1.使用mget批量获取&#xff0c;如果存在重定向问题&#xff0c;会抛出异常。 Testpublic void testMget(){JedisCluster jedis RedisClusterUtil.getJedis();List<String> results null;results jedis.mget("user:{info}:id"…

父子组件传值

div里夹的组件与之前组件内的不一样了。不是自己传自己了。 是父组件还是子组件&#xff1f; 哪个是子&#xff0c;哪个是父&#xff1f; 盲猜下面有java 无难事的是父组件&#xff0c;上面的是子组件&#xff1f; list是子组件&#xff0c;item是父组件&#xff1f; 对不对呢 …

ensorflow: tf.stack和tf.unstack的区别,实例解释

将两个N维张量列表沿着axis轴组合成一个n1维的张量&#xff0c;例如下面tensor(2,3)与tensor1(2,3),一个y(2,2,3) import tensorflow as tf tensor[[1,2,3],[4,5,6]] tensor2[[10,20,30],[40,50,60]] ytf.stack([tensor,tensor2]) y2tf.stack([tensor,tensor2],axis1) print(y…

这个为什么显示不出来?

<div id"app"><post-list /> </div> <script src"https://unpkg.com/vuenext"></script> <script>const app Vue.createApp(PostList, {data() {return {title: Java无难事}},components: {PostItem},template: <…

to_categorical函数介绍

to_categorical就是将类别标签向量转换为二进制&#xff08;只有0和1&#xff09;的矩阵类型表示。每一个标签用矩阵的对应的行向量来表示。 np_utils.to_categorical(数据的类别标签, 总类别数) 例如类别的标签为0、1、2、3、4&#xff0c;将数据分为这5类&#xff0c;则经过…

Grafana集成到自己的Web项目(避坑)

1.修改配置 把Grafana设置成匿名登录&#xff1a; 允许嵌入&#xff1a; 2.选择自己要分享的图表 3.复制框框内的代码到自己的前端项目 4.浏览

嵌入页面拒绝了我们的连接请求

背景 将Grafana图表使用iframe集成到自己的web项目时出现 ”192.168.79.130 拒绝了我们的连接请求“ 192.168.79.130为虚拟机地址。 原因 Grafana默认不支持嵌入。 解决 修改配置即可。