Vue.js基础-09-组件（Component）

文章目录

1. 注册组件
2. 接收父组件传来属性（Prop）

1. 注册组件

1.1 创建实例时注册

语法示例

在实例中注册组件

       components: {
        tagName: {options,},
      }

tagName 为组件名，options 为配置选项。

调用组件

 <tagName></tagName>

示例

     <div id="app">
      <shu></shu>
    </div>

完整示例

 <!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8" />
  <title>CROW-宋</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
 
<body>
  <div id="app">
    <shu></shu>
  </div>
 
  <script>
    new Vue({
      el: "#app",
      components: {
        shu: {
          template: "<h1>自定义组件!</h1>",
        },
      },
    });
  </script>
</body>
 
</html>

1.2 在实例外注册组件

语法示例

注册组件

 Vue.component(tagName, options)

tagName 为组件名，options 为配置选项。

完整示例

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>CROW-宋</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <shu></shu>
    </div>
 
    <script>
      Vue.component("shu", {
        template: "<h1>自定义组件!</h1>",
      });
      new Vue({
        el: "#app",
      });
    </script>
  </body>
</html>

1.3 在变量中定义组件选项

完整示例

 <!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8" />
  <title>CROW-宋</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
 
<body>
  <div id="app">
    <shu></shu>
  </div>
 
  <script>
    var Child = {
      template: "<h1>自定义组件</h1>",
    };
    new Vue({
      el: "#app",
      components: {
        shu: Child
      },
    });
  </script>
</body>
 
</html>

2. 接收父组件传来属性（Prop）

子组件用它来接受父组件传递过来的数据的一个自定义属性。

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”

2.1 基本使用

语法示例

         props: ["message"],

完整示例

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>CROW-宋</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <shu message="hello"></shu>
    </div>
 
    <script>
      Vue.component("shu", {
        propes: ["message"],
        template: "<h1>{{message}}</h1>",
      });
      new Vue({
        el: "#app",
      });
    </script>
  </body>
</html>

2.2 动态绑定

用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：

 <!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <title>CROW-宋</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
 
<body>
  <div id="app">
    <div>
      <input v-model="name">
      <br>
      <shu v-bind:message="name"></shu>
    </div>
  </div>
 
  <script>
    Vue.component('shu', {
      props: ['message'],
      template: '<span>{{ message }}</span>'
    })
    new Vue({
      el: '#app',
      data: {
        name: '关羽'
      }
    })
  </script>
</body>
 
</html>

结果显示

2.3 绑定列表

 <!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <title>CROW-宋</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
 
<body>
  <div id="app">
    <ol>
      <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
    </ol>
  </div>
 
  <script>
    Vue.component('todo-item', {
      props: ['todo'],
      template: '<li>{{ todo.name }}</li>'
    })
    new Vue({
      el: '#app',
      data: {
        sites: [
          { name: '刘备' },
          { name: '关羽' },
          { name: '张飞' }
        ]
      }
    })
  </script>
</body>
 
</html>

posted on 2022-06-06 22:15 运维开发玄德公阅读(54) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue.js基础-10-监听子组件事件（v-on）、绑定子组件数据（v-model）

· Vue.js基础-06-绑定样式（v-bind）-01-绑定class属性（v-bind:class）

· vue学习

· vue学习笔记：组件

· Vue(九)——组件(一)基础介绍、全局注册、单向数据流

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球运作规律

Vue.js基础-09-组件（Component）

文章目录

1. 注册组件

1.1 创建实例时注册

语法示例

完整示例

1.2 在实例外注册组件

语法示例

完整示例

1.3 在变量中定义组件选项

完整示例

2. 接收父组件传来属性（Prop）

2.1 基本使用

语法示例

完整示例

2.2 动态绑定

2.3 绑定列表

导航

统计

合集

	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8" />
	<title>CROW-宋</title>
	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	</head>

	<body>
	<div id="app">
	<shu></shu>
	</div>

	<script>
	new Vue({
	el: "#app",
	components: {
	shu: {
	template: "<h1>自定义组件!</h1>",
	},
	},
	});
	</script>
	</body>

	</html>