为组件添加外部属性props

admin

props配置组件的属性,props定义的属性是提供给外部进行设置使用的

1.     <div id="Application">
   
2.         <my-alert title="按钮1"></my-alert>
   
3.         <my-alert title="按钮2"></my-alert>
   
4.     </div>
   
5.     <script>
   
6.         const App = Vue.createApp({});  //使用Vue.createApp()创建Vue应用实例
   
7.         const alertComponent = {
   
8.             //data提供应用所需的全局数据
   
9.             data() {
   
10.                 return {
    
11.                     msg: "警告框提示",
    
12.                     count: 0
    
13.                 }
    
14.             },
    
15.             //methods配置组件中需要用到的方法
    
16.             methods: {
    
17.                 click() {
    
18.                     alert(this.msg + this.count++)
    
19.                 },
    
20.                 countChange(value, oldValue) {
    
21.                     console.log(value, oldValue)
    
22.                 }
    
23.             },
    
24.             //computed配置组件的计算属性
    
25.             computed: {
    
26.                 get() {
    
27.                     return this.count + "次"
    
28.                 }
    
29.             },
    
30.             //watch配置组件的监听函数
    
31.             watch: {
    
32.                 count: "countChange"
    
33.             },
    
34.             //props配置组件的属性,props定义的属性是提供给外部进行设置使用的
    
35.             props: ["title"],
    
36.             //tamplate配置组件的模板
    
37.             template: `<div><button @click="click">{{ title }}</button></div>`
    
38.         }
    
39.         //注册组件,应用实例可以用component()方法来定义组件，定义好组件后，组件就可以在模板中使用
    
40.         App.component("my-alert", alertComponent);
    
41.         //挂载应用,挂载到id为Application的元素上,创建好Vue应用实例后，使用mount()方法绑定到指定的HTML元素上
    
42.         App.mount("#Application");
    
43.     </script>

复制代码