Vue笔记 day5

最新推荐文章于 2022-03-13 12:51:51 发布

都说没想好

最新推荐文章于 2022-03-13 12:51:51 发布

阅读量196

点赞数

本文链接：https://blog.csdn.net/u013045370/article/details/83749818

版权

上周准备参加测试大赛，浪费了一周时间没有学习VUE，罪过...

今天开始要双管齐下，还要看论文，三管齐抓啦〜

（1）父子组件之间的传值

在教程里，它认为，Vue的实例中的就是父组件，子组件在父组件中定义的组分

这个子组件是没法直接用父组件中的数据的

需要用V-绑定属性传值

属性需要在对象里用的道具定义这个属性

这个过程是属性传递，过程如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">

    <com1 v-bind:parentmsg="msg"></com1><!-- 第四步，绑定一个属性parentmsg，这个是子组件自己的属性，赋值为父组件的data-->

  </div>


  <template id="tmpl"> <!-- 第三步，挂钩的实例对象模板实际内容，里面的数据是子组件的属性值属性 -->
    <div>
      <h1>这是子元素 --- {
  { parentmsg }}</h1> <!-- 第五步，想要怎么展示这个子组件的属性值data，在模板里写 -->
    </div>
  </template>

  <script>

    var com1 = {  //第二步延伸：设置子组件的实例对象为id=tmpl
      template: '#tmpl',
      props: [